├── .prettierignore ├── packages ├── chakra-ui │ ├── src │ │ ├── theme │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── examples.js │ │ │ ├── sizes.js │ │ │ ├── typography.js │ │ │ ├── colors-utils.js │ │ │ └── theme.js │ │ ├── usePrevious │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Portal │ │ │ ├── index.js │ │ │ └── index.d.ts │ │ ├── CSSReset │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Text │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Divider │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Kbd │ │ │ ├── index.d.ts │ │ │ ├── examples.js │ │ │ └── index.js │ │ ├── Code │ │ │ ├── index.d.ts │ │ │ ├── examples.js │ │ │ └── index.js │ │ ├── FormHelperText │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── VisuallyHidden │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── FormErrorMessage │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Textarea │ │ │ ├── index.d.ts │ │ │ ├── examples.js │ │ │ └── index.js │ │ ├── CloseButton │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── ThemeProvider │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── useClipboard │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Embed │ │ │ ├── index.d.ts │ │ │ ├── examples.js │ │ │ └── index.js │ │ ├── Spinner │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Heading │ │ │ ├── index.d.ts │ │ │ ├── examples.js │ │ │ └── index.js │ │ ├── utils │ │ │ └── index.d.ts │ │ ├── InputGroup │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── useDisclosure │ │ │ ├── index.js │ │ │ └── index.d.ts │ │ ├── Flex │ │ │ ├── index.js │ │ │ └── index.d.ts │ │ ├── Slider │ │ │ ├── examples.js │ │ │ └── index.d.ts │ │ ├── Link │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Progress │ │ │ ├── index.d.ts │ │ │ └── examples.js │ │ ├── Callout │ │ │ ├── index.js │ │ │ └── index.d.ts │ │ ├── CheckboxGroup │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Select │ │ │ ├── examples.js │ │ │ └── index.d.ts │ │ ├── Stack │ │ │ ├── examples.js │ │ │ ├── index.js │ │ │ └── index.d.ts │ │ ├── Badge │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── examples.js │ │ ├── Tooltip │ │ │ ├── index.d.ts │ │ │ └── examples.js │ │ ├── ColorModeProvider │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── CircularProgress │ │ │ ├── examples.js │ │ │ └── index.d.ts │ │ ├── NumberInput │ │ │ ├── examples.js │ │ │ └── index.d.ts │ │ ├── Icon │ │ │ ├── index.d.ts │ │ │ ├── examples.js │ │ │ └── index.js │ │ ├── Stat │ │ │ ├── index.d.ts │ │ │ ├── examples.js │ │ │ └── index.js │ │ ├── RadioButtonGroup │ │ │ ├── index.d.ts │ │ │ └── examples.js │ │ ├── ControlBox │ │ │ ├── index.d.ts │ │ │ └── examples.js │ │ ├── Toast │ │ │ ├── index.d.ts │ │ │ └── examples.js │ │ ├── Input │ │ │ ├── examples.js │ │ │ └── index.js │ │ ├── RadioGroup │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── ButtonGroup │ │ │ ├── index.d.ts │ │ │ ├── examples.js │ │ │ └── index.js │ │ ├── Alert │ │ │ ├── index.d.ts │ │ │ ├── examples.js │ │ │ └── index.js │ │ ├── FormLabel │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── List │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── FormControl │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Image │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Tag │ │ │ ├── index.d.ts │ │ │ └── examples.js │ │ ├── IconButton │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── examples.js │ │ ├── Switch │ │ │ ├── examples.js │ │ │ └── index.d.ts │ │ ├── InputAddon │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Grid │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Box │ │ │ └── index.js │ │ ├── AvatarGroup │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Radio │ │ │ ├── examples.js │ │ │ └── index.d.ts │ │ ├── Popover │ │ │ ├── examples.js │ │ │ └── index.d.ts │ │ ├── Menu │ │ │ ├── MenuOption.d.ts │ │ │ └── styles.js │ │ ├── InputElement │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Collapse │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ └── examples.js │ │ ├── Modal │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ └── examples.js │ │ ├── Breadcrumb │ │ │ ├── index.d.ts │ │ │ └── examples.js │ │ ├── Avatar │ │ │ ├── index.d.ts │ │ │ ├── styles.js │ │ │ └── examples.js │ │ ├── Editable │ │ │ └── examples.js │ │ ├── AlertDialog │ │ │ ├── index.js │ │ │ ├── examples.js │ │ │ ├── components.js │ │ │ └── index.d.ts │ │ ├── Drawer │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ └── examples.js │ │ ├── Checkbox │ │ │ └── styles.js │ │ ├── PseudoBox │ │ │ └── examples.js │ │ └── Button │ │ │ └── index.d.ts │ ├── tests │ │ ├── .eslintrc │ │ └── index-test.js │ ├── .storybook │ │ ├── addons.js │ │ └── config.js │ ├── .npmignore │ ├── .gitignore │ ├── tslint.json │ ├── tsconfig.json │ ├── CONTRIBUTING.md │ ├── babel.config.js │ ├── ROADMAP.md │ ├── rollup.config.js │ └── README.md └── chakra-ui-docs │ ├── static │ ├── favicon.ico │ └── favicon.png │ ├── pages │ ├── text.mdx │ ├── useTheme.mdx │ ├── flex.mdx │ ├── code.mdx │ ├── textarea.mdx │ ├── stat.mdx │ ├── visuallyhidden.mdx │ ├── link.mdx │ ├── keyboardkey.mdx │ ├── closebutton.mdx │ ├── grid.mdx │ ├── useClipboard.mdx │ ├── useDisclosure.mdx │ ├── principles.mdx │ ├── spinner.mdx │ ├── _document.js │ └── progress.mdx │ ├── now.json │ ├── .gitignore │ ├── next.config.js │ ├── components │ ├── Pagination.js │ ├── components.js │ ├── ColorPalette.js │ ├── MobileNav.js │ └── NoFlashSript.js │ ├── package.json │ └── seo.config.js ├── .gitignore ├── .vscode └── settings.json ├── lerna.json ├── .eslintrc.json ├── .prettierrc ├── now.json └── .all-contributorsrc /.prettierignore: -------------------------------------------------------------------------------- 1 | */dist 2 | node_modules 3 | */node_modules 4 | */coverage -------------------------------------------------------------------------------- /packages/chakra-ui/src/theme/index.js: -------------------------------------------------------------------------------- 1 | export { default } from "./theme"; 2 | -------------------------------------------------------------------------------- /packages/chakra-ui/tests/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/usePrevious/index.d.ts: -------------------------------------------------------------------------------- 1 | export default function usePrevious(value: T): T; 2 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Portal/index.js: -------------------------------------------------------------------------------- 1 | import Portal from "@reach/portal"; 2 | export default Portal; 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | lerna-debug.log 3 | npm-debug.log 4 | packages/*/lib 5 | packages/*/.next 6 | storybook-static -------------------------------------------------------------------------------- /packages/chakra-ui/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import "@storybook/addon-knobs/register"; 2 | import "@storybook/addon-actions/register"; 3 | -------------------------------------------------------------------------------- /packages/chakra-ui-docs/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/chakra-ui/master/packages/chakra-ui-docs/static/favicon.ico -------------------------------------------------------------------------------- /packages/chakra-ui-docs/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/chakra-ui/master/packages/chakra-ui-docs/static/favicon.png -------------------------------------------------------------------------------- /packages/chakra-ui/src/CSSReset/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | declare const CSSReset: React.FC; 3 | export default CSSReset; 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "mdx-preview.preview.useVscodeMarkdownStyles": true, 3 | "files.watcherExclude": { 4 | "dist/**": true 5 | } 6 | } -------------------------------------------------------------------------------- /packages/chakra-ui/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | tests 3 | demo 4 | src 5 | scripts 6 | stories 7 | .storybook 8 | .env 9 | .gitignore 10 | *.log -------------------------------------------------------------------------------- /packages/chakra-ui/.gitignore: -------------------------------------------------------------------------------- 1 | coverage 2 | es 3 | dist 4 | node_modules 5 | umd 6 | npm-debug.log* 7 | .env 8 | *.log 9 | yarn.lock 10 | .rpt2_cache -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*"], 3 | "version": "independent", 4 | "registry": "https://registry.npmjs.org/", 5 | "publishConfig": { "access": "public" } 6 | } 7 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Text/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BoxProps } from "../Box"; 2 | import * as React from "react"; 3 | 4 | declare const Text: React.FC; 5 | 6 | export default Text; 7 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Divider/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { BoxProps } from "../Box"; 3 | 4 | declare const Divider: React.FC; 5 | export default Divider; 6 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Portal/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | declare const Portal: React.FC<{ children: React.ReactNode; type?: string }>; 4 | 5 | export default Portal; 6 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Text/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Box from "../Box"; 3 | 4 | const Text = props => { 5 | return ; 6 | }; 7 | 8 | export default Text; 9 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Kbd/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { BoxProps } from "../Box"; 3 | 4 | declare const KeyboardKey: React.FC; 5 | 6 | export default KeyboardKey; 7 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["react-app", "plugin:jsx-a11y/recommended"], 3 | "plugins": ["jsx-a11y"], 4 | "rules": { 5 | // "jsx-a11y/rule-name": 2, 6 | "no-console": "off" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Code/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { BoxProps } from "../Box"; 3 | 4 | declare const Code: React.FC; 5 | 6 | export default Code; 7 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/FormHelperText/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BoxProps } from "../Box"; 2 | import * as React from "react"; 3 | 4 | declare const FormHelperText: React.FC; 5 | 6 | export default FormHelperText; 7 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/VisuallyHidden/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { BoxProps } from "../Box"; 3 | 4 | declare const VisuallyHidden: React.FC; 5 | 6 | export default VisuallyHidden; 7 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/FormErrorMessage/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BoxProps } from "../Box"; 2 | import * as React from "react"; 3 | 4 | declare const FormErrorMessage: React.FC; 5 | 6 | export default FormErrorMessage; 7 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Textarea/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { InputProps } from "../Input"; 3 | 4 | declare const Textarea: React.FC>; 5 | 6 | export default Textarea; 7 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Code/examples.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from "@emotion/core"; 3 | import { storiesOf } from "@storybook/react"; 4 | import Code from "."; 5 | 6 | const stories = storiesOf("Code", module); 7 | stories.add("Default", () => import); 8 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/CloseButton/examples.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from "@emotion/core"; 3 | import { storiesOf } from "@storybook/react"; 4 | import CloseButton from "."; 5 | 6 | const stories = storiesOf("CloseButton", module); 7 | stories.add("Default", () => ); 8 | -------------------------------------------------------------------------------- /packages/chakra-ui-docs/pages/text.mdx: -------------------------------------------------------------------------------- 1 | # Text 2 | 3 | Text is the most common typographical element within our interfaces. Think of it 4 | as the body copy. 5 | 6 | ## Size 7 | 8 | The level of text you select should provide the appropriate hierarchy and visual 9 | coherency within the interface. 10 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/usePrevious/index.js: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from "react"; 2 | 3 | function usePrevious(value) { 4 | const ref = useRef(); 5 | 6 | useEffect(() => { 7 | ref.current = value; 8 | }, [value]); 9 | 10 | return ref.current; 11 | } 12 | 13 | export default usePrevious; 14 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/ThemeProvider/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as Emotion from "emotion-theming"; 2 | import * as React from "react"; 3 | import { ITheme } from "../theme"; 4 | 5 | declare const ThemeProvider: React.FC>; 6 | export default ThemeProvider; 7 | 8 | export function useTheme(): ITheme; 9 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/theme/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as StyledSystem from "styled-system"; 2 | 3 | interface IIcon { 4 | path: JSX.Element; 5 | viewBox?: string; 6 | } 7 | 8 | export interface ITheme extends StyledSystem.Theme { 9 | icons: IIcon; 10 | } 11 | 12 | declare const theme: ITheme; 13 | 14 | export default theme; 15 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/useClipboard/index.d.ts: -------------------------------------------------------------------------------- 1 | interface IClipboard { 2 | value?: T; 3 | onCopy?: () => void; 4 | hasCopied?: boolean; 5 | } 6 | 7 | /** 8 | * `useClipboard` is a custom hook to handle copying content to clipboard 9 | */ 10 | declare function useClipboard(value: T): IClipboard; 11 | 12 | export default useClipboard; 13 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Embed/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { BoxProps } from "../Box"; 3 | 4 | interface IEmbed { 5 | aspectRatio?: "21:9" | "16:9" | "9:16" | "4:3" | "1.85:1" | "1:1"; 6 | } 7 | 8 | export type EmbedProps = IEmbed & BoxProps; 9 | 10 | declare const Embed: React.FC; 11 | 12 | export default Embed; 13 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Spinner/examples.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from "@emotion/core"; 3 | import { storiesOf } from "@storybook/react"; 4 | import Spinner from "."; 5 | 6 | const stories = storiesOf("Spinner", module); 7 | stories.add("Default", () => 8 | ["xl", "lg", "md", "sm", "xs"].map(size => ( 9 | 10 | )), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Kbd/examples.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from "@storybook/react"; 2 | import Kbd from "."; 3 | import React from "react"; 4 | import Box from "../Box"; 5 | 6 | const stories = storiesOf("Keyboard", module); 7 | 8 | stories.add("Default", () => ( 9 | 10 | 11 | ctrl+D 12 | 13 | 14 | )); 15 | -------------------------------------------------------------------------------- /packages/chakra-ui-docs/now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "name": "chakra-ui", 4 | "builds": [{ "src": "package.json", "use": "@now/next" }], 5 | "alias": ["chakra-ui.com", "chakra-ui"], 6 | "scope": "chakra-ui", 7 | "routes": [ 8 | { 9 | "src": "www.chakra-ui.com/*", 10 | "status": 301, 11 | "headers": { "Location": "https://chakra-ui.com/$1" } 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Heading/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BoxProps } from "../Box"; 2 | import * as React from "react"; 3 | 4 | interface IHeading { 5 | /** 6 | * The size of the Heading. 7 | */ 8 | size?: "2xl" | "xl" | "lg" | "md" | "sm" | "xs"; 9 | } 10 | 11 | export type HeadingProps = IHeading & BoxProps; 12 | 13 | declare const Heading: React.FC; 14 | 15 | export default Heading; 16 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/utils/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export function genId(prefix: string): string; 4 | export function makeId(id: number, index: number): string; 5 | export function assignRef(ref: T, value: T): T; 6 | export function mergeRefs(refs: T, value: T): T; 7 | export function getFocusables( 8 | element: React.ReactNode, 9 | keyboardOnly: boolean, 10 | ): T; 11 | -------------------------------------------------------------------------------- /packages/chakra-ui-docs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | .env* 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/InputGroup/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BoxProps } from "../Box"; 2 | import * as React from "react"; 3 | import { IInput } from "../Input"; 4 | 5 | export interface IInputGroup { 6 | size?: IInput["size"]; 7 | children: React.ReactNode; 8 | } 9 | 10 | export type InputGroupProps = IInputGroup & BoxProps; 11 | declare const InputGroup: React.FC; 12 | 13 | export default InputGroup; 14 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/VisuallyHidden/index.js: -------------------------------------------------------------------------------- 1 | import styled from "@emotion/styled"; 2 | import Box from "../Box"; 3 | 4 | const VisuallyHidden = styled(Box)` 5 | border: 0px; 6 | clip: rect(0px, 0px, 0px, 0px); 7 | height: 1px; 8 | width: 1px; 9 | margin: -1px; 10 | padding: 0px; 11 | overflow: hidden; 12 | white-space: nowrap; 13 | position: absolute; 14 | `; 15 | 16 | export default VisuallyHidden; 17 | -------------------------------------------------------------------------------- /packages/chakra-ui/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "dtslint/dtslint.json", 5 | "tslint:latest", 6 | "tslint-config-prettier" 7 | ], 8 | "jsRules": {}, 9 | "rules": { 10 | "deprecation": true, 11 | "ordered-imports": false, 12 | "no-unnecessary-callback-wrapper": false, 13 | "no-unnecessary-generics": false 14 | }, 15 | "rulesDirectory": [] 16 | } 17 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/useDisclosure/index.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const useDisclosure = defaultIsOpen => { 4 | const [isOpen, setIsOpen] = useState(defaultIsOpen || false); 5 | const onClose = () => setIsOpen(false); 6 | const onOpen = () => setIsOpen(true); 7 | const onToggle = () => setIsOpen(!isOpen); 8 | return { isOpen, onOpen, onClose, onToggle }; 9 | }; 10 | 11 | export default useDisclosure; 12 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Flex/index.js: -------------------------------------------------------------------------------- 1 | import React, { forwardRef } from "react"; 2 | import Box from "../Box"; 3 | 4 | const Flex = forwardRef(({ align, justify, wrap, direction, ...rest }, ref) => ( 5 | 14 | )); 15 | 16 | export default Flex; 17 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Slider/examples.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from "@emotion/core"; 3 | import { storiesOf } from "@storybook/react"; 4 | import Slider, { SliderThumb, SliderTrack, SliderFilledTrack } from "."; 5 | 6 | const stories = storiesOf("Slider", module); 7 | 8 | stories.add("Default", () => ( 9 | 10 | 11 | 12 | 13 | 14 | )); 15 | -------------------------------------------------------------------------------- /packages/chakra-ui/src/Textarea/examples.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from "@emotion/core"; 3 | import { storiesOf } from "@storybook/react"; 4 | import Textarea from "."; 5 | 6 | const stories = storiesOf("Textarea", module); 7 | 8 | stories.add("Default", () => ( 9 |