@jbpark/ui-kit 2.10.0 → 2.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button.mjs +0 -1
- package/dist/Button.mjs.map +1 -1
- package/dist/Tag.mjs +0 -1
- package/dist/Tag.mjs.map +1 -1
- package/dist/components/atoms/checkbox/checkbox.mjs +0 -1
- package/dist/components/atoms/checkbox/checkbox.mjs.map +1 -1
- package/dist/components/atoms/float-button/back-top.mjs +1 -0
- package/dist/components/atoms/float-button/back-top.mjs.map +1 -1
- package/dist/components/atoms/float-button/float-button.mjs +1 -1
- package/dist/components/atoms/float-button/float-button.mjs.map +1 -1
- package/dist/components/atoms/input/input.mjs +0 -1
- package/dist/components/atoms/input/input.mjs.map +1 -1
- package/dist/components/atoms/input/search.mjs +9 -4
- package/dist/components/atoms/input/search.mjs.map +1 -1
- package/dist/components/atoms/input/text-area.mjs +0 -1
- package/dist/components/atoms/input/text-area.mjs.map +1 -1
- package/dist/components/atoms/popover.mjs +0 -1
- package/dist/components/atoms/popover.mjs.map +1 -1
- package/dist/components/atoms/progress.mjs +0 -1
- package/dist/components/atoms/progress.mjs.map +1 -1
- package/dist/components/atoms/radio/radio.mjs +0 -1
- package/dist/components/atoms/radio/radio.mjs.map +1 -1
- package/dist/components/atoms/select.mjs +0 -1
- package/dist/components/atoms/select.mjs.map +1 -1
- package/dist/components/atoms/skeleton/skeleton.mjs +4 -3
- package/dist/components/atoms/skeleton/skeleton.mjs.map +1 -1
- package/dist/components/atoms/switch.mjs +0 -1
- package/dist/components/atoms/switch.mjs.map +1 -1
- package/dist/components/atoms/typography/link.d.mts +2 -0
- package/dist/components/atoms/typography/link.d.mts.map +1 -1
- package/dist/components/atoms/typography/link.mjs +3 -1
- package/dist/components/atoms/typography/link.mjs.map +1 -1
- package/dist/components/atoms/typography/text.mjs +1 -1
- package/dist/components/atoms/typography/text.mjs.map +1 -1
- package/dist/components/atoms/typography/title.d.mts.map +1 -1
- package/dist/components/atoms/typography/title.mjs +6 -6
- package/dist/components/atoms/typography/title.mjs.map +1 -1
- package/dist/components/molecules/collapse.mjs +0 -1
- package/dist/components/molecules/collapse.mjs.map +1 -1
- package/dist/components/molecules/dropdown.mjs +0 -1
- package/dist/components/molecules/dropdown.mjs.map +1 -1
- package/dist/components/molecules/menu/menu.mjs +0 -1
- package/dist/components/molecules/menu/menu.mjs.map +1 -1
- package/dist/components/molecules/splitter/panel.mjs +0 -1
- package/dist/components/molecules/splitter/panel.mjs.map +1 -1
- package/dist/components/molecules/splitter/splitter.mjs +0 -1
- package/dist/components/molecules/splitter/splitter.mjs.map +1 -1
- package/dist/components/organisms/drawer.mjs +0 -1
- package/dist/components/organisms/drawer.mjs.map +1 -1
- package/dist/components/organisms/list/list.mjs +0 -1
- package/dist/components/organisms/list/list.mjs.map +1 -1
- package/dist/components/organisms/modal.mjs +0 -1
- package/dist/components/organisms/modal.mjs.map +1 -1
- package/dist/components/organisms/swiper/swiper.mjs +0 -1
- package/dist/components/organisms/swiper/swiper.mjs.map +1 -1
- package/dist/components/templates/layout/layout.d.mts.map +1 -1
- package/dist/components/templates/layout/layout.mjs +11 -5
- package/dist/components/templates/layout/layout.mjs.map +1 -1
- package/dist/index.mjs +0 -5
- package/dist/style.css +75 -18
- package/package.json +4 -1
- package/dist/components/atoms/index.mjs +0 -16
- package/dist/components/molecules/index.mjs +0 -11
- package/dist/components/molecules/menu/item/index.mjs +0 -3
- package/dist/components/organisms/index.mjs +0 -6
- package/dist/components/templates/index.mjs +0 -3
- package/dist/providers/index.mjs +0 -4
package/dist/Button.mjs
CHANGED
package/dist/Button.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","names":["button.Button"],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport { LoaderCircle } from 'lucide-react';\n\nimport { button } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = button.Button;\ntype ButtonProps = button.Props;\n\ntype PresetColors =\n | 'blue'\n | 'purple'\n | 'cyan'\n | 'green'\n | 'magenta'\n | 'pink'\n | 'red'\n | 'orange'\n | 'yellow'\n | 'volcano'\n | 'geekblue'\n | 'lime'\n | 'gold';\n\nexport interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {\n icon?: React.ReactNode;\n block?: boolean;\n danger?: boolean;\n disabled?: boolean;\n size?: 'small' | 'middle' | 'large';\n type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n shape?: 'default' | 'circle' | 'round';\n color?: PresetColors | 'default' | 'primary' | 'danger';\n loading?: boolean | { icon: React.ReactNode };\n}\n\nconst variantClasses: Record<string, string> = {\n solid: '',\n outlined: cn(\n 'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n 'bg-background text-foreground',\n 'hover:bg-accent',\n ),\n dashed: cn(\n 'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n 'bg-background text-foreground',\n 'hover:bg-accent',\n ),\n filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n link: cn(\n 'bg-transparent text-primary',\n 'underline-offset-4 hover:underline',\n 'hover:bg-primary/10',\n ),\n};\n\nconst typeToVariant: Record<string, string> = {\n primary: 'solid',\n default: 'outlined',\n dashed: 'dashed',\n text: 'text',\n link: 'link',\n};\n\nconst sizesClasses: Record<string, string> = {\n small: 'h-6 px-3 text-sm',\n middle: 'h-8 px-4 text-base',\n large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n default: 'rounded-sm',\n circle: 'rounded-full',\n round: 'rounded-2xl',\n};\n\nconst Button = ({\n icon,\n className,\n type = 'default',\n variant,\n size = 'middle',\n color = 'default',\n shape = 'default',\n block = false,\n disabled,\n loading,\n danger,\n children,\n onMouseDown,\n ...props\n}: Props) => {\n const iconOnly = icon && !children;\n const computedColor = danger ? 'danger' : color;\n const colored = computedColor && computedColor !== 'default';\n const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\n\n const displayIcon = loading ? (\n typeof loading === 'object' ? (\n loading.icon\n ) : (\n <LoaderCircle className=\"animate-spin\" />\n )\n ) : (\n icon\n );\n\n return (\n <Core\n disabled={disabled}\n variant=\"default\"\n data-color={computedColor}\n className={cn(\n 'inline-flex items-center justify-center gap-x-2',\n 'rounded-lg',\n 'cursor-pointer',\n 'h-auto py-0',\n 'transition-all',\n variantClasses[resolvedVariant],\n sizesClasses[size || 'medium'],\n iconOnly && ['p-0', iconClasses[size || 'medium']],\n shapesClasses[shape || 'default'],\n block && 'w-full',\n colored &&\n (resolvedVariant === 'solid'\n ? [\n 'bg-(--btn-bg)',\n 'hover:bg-(--btn-bg-hover)',\n 'active:bg-(--btn-bg-active)',\n 'text-(--btn-fg)',\n 'border-(--btn-border)',\n ]\n : [\n 'text-(--btn-bg)',\n 'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n //\n ]),\n className,\n //\n )}\n onMouseDown={e => {\n e.preventDefault();\n onMouseDown?.(e);\n }}\n {...props}\n >\n {displayIcon}\n {children}\n </Core>\n );\n};\n\nexport default Button;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.mjs","names":["button.Button"],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport { LoaderCircle } from 'lucide-react';\n\nimport { button } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = button.Button;\ntype ButtonProps = button.Props;\n\ntype PresetColors =\n | 'blue'\n | 'purple'\n | 'cyan'\n | 'green'\n | 'magenta'\n | 'pink'\n | 'red'\n | 'orange'\n | 'yellow'\n | 'volcano'\n | 'geekblue'\n | 'lime'\n | 'gold';\n\nexport interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {\n icon?: React.ReactNode;\n block?: boolean;\n danger?: boolean;\n disabled?: boolean;\n size?: 'small' | 'middle' | 'large';\n type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n shape?: 'default' | 'circle' | 'round';\n color?: PresetColors | 'default' | 'primary' | 'danger';\n loading?: boolean | { icon: React.ReactNode };\n}\n\nconst variantClasses: Record<string, string> = {\n solid: '',\n outlined: cn(\n 'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n 'bg-background text-foreground',\n 'hover:bg-accent',\n ),\n dashed: cn(\n 'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n 'bg-background text-foreground',\n 'hover:bg-accent',\n ),\n filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n link: cn(\n 'bg-transparent text-primary',\n 'underline-offset-4 hover:underline',\n 'hover:bg-primary/10',\n ),\n};\n\nconst typeToVariant: Record<string, string> = {\n primary: 'solid',\n default: 'outlined',\n dashed: 'dashed',\n text: 'text',\n link: 'link',\n};\n\nconst sizesClasses: Record<string, string> = {\n small: 'h-6 px-3 text-sm',\n middle: 'h-8 px-4 text-base',\n large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n default: 'rounded-sm',\n circle: 'rounded-full',\n round: 'rounded-2xl',\n};\n\nconst Button = ({\n icon,\n className,\n type = 'default',\n variant,\n size = 'middle',\n color = 'default',\n shape = 'default',\n block = false,\n disabled,\n loading,\n danger,\n children,\n onMouseDown,\n ...props\n}: Props) => {\n const iconOnly = icon && !children;\n const computedColor = danger ? 'danger' : color;\n const colored = computedColor && computedColor !== 'default';\n const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\n\n const displayIcon = loading ? (\n typeof loading === 'object' ? (\n loading.icon\n ) : (\n <LoaderCircle className=\"animate-spin\" />\n )\n ) : (\n icon\n );\n\n return (\n <Core\n disabled={disabled}\n variant=\"default\"\n data-color={computedColor}\n className={cn(\n 'inline-flex items-center justify-center gap-x-2',\n 'rounded-lg',\n 'cursor-pointer',\n 'h-auto py-0',\n 'transition-all',\n variantClasses[resolvedVariant],\n sizesClasses[size || 'medium'],\n iconOnly && ['p-0', iconClasses[size || 'medium']],\n shapesClasses[shape || 'default'],\n block && 'w-full',\n colored &&\n (resolvedVariant === 'solid'\n ? [\n 'bg-(--btn-bg)',\n 'hover:bg-(--btn-bg-hover)',\n 'active:bg-(--btn-bg-active)',\n 'text-(--btn-fg)',\n 'border-(--btn-border)',\n ]\n : [\n 'text-(--btn-bg)',\n 'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n //\n ]),\n className,\n //\n )}\n onMouseDown={e => {\n e.preventDefault();\n onMouseDown?.(e);\n }}\n {...props}\n >\n {displayIcon}\n {children}\n </Core>\n );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;AAOA,MAAM,OAAOA;AA+Bb,MAAM,iBAAyC;CAC7C,OAAO;CACP,UAAU,GACR,yEACA,iCACA,kBACD;CACD,QAAQ,GACN,uFACA,iCACA,kBACD;CACD,QAAQ,GAAG,4BAA4B,oBAAoB;CAC3D,MAAM,GAAG,kCAAkC,kBAAkB;CAC7D,MAAM,GACJ,+BACA,sCACA,sBACD;CACF;AAED,MAAM,gBAAwC;CAC5C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;CACP;AAED,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;CACR;AAED,MAAM,UAAU,EACd,MACA,WACA,OAAO,WACP,SACA,OAAO,UACP,QAAQ,WACR,QAAQ,WACR,QAAQ,OACR,UACA,SACA,QACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,WAAW,QAAQ,CAAC;CAC1B,MAAM,gBAAgB,SAAS,WAAW;CAC1C,MAAM,UAAU,iBAAiB,kBAAkB;CACnD,MAAM,kBAAkB,WAAW,cAAc,SAAS;CAE1D,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,gBAAa,WAAU,iBAAiB,GAG3C;AAGF,QACE,qBAAC;EACW;EACV,SAAQ;EACR,cAAY;EACZ,WAAW,GACT,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,QAAQ,WACrB,YAAY,CAAC,OAAO,YAAY,QAAQ,UAAU,EAClD,cAAc,SAAS,YACvB,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;GACD,GACD,CACE,mBACA,iEAED,GACP,UAED;EACD,cAAa,MAAK;AAChB,KAAE,gBAAgB;AAClB,iBAAc,EAAE;;EAElB,GAAI;aAEH,aACA;GACI"}
|
package/dist/Tag.mjs
CHANGED
package/dist/Tag.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.mjs","names":["badge.Badge"],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["import { badge } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = badge.Badge;\ntype BadgeProps = badge.Props;\n\nexport interface Props extends Omit<BadgeProps, 'variant'> {\n variant?: 'default' | 'outlined';\n color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';\n}\n\nconst fillColorClasses: Record<string, string> = {\n default: 'border-transparent bg-muted text-muted-foreground',\n primary: 'border-transparent bg-primary/10 text-primary',\n success:\n 'border-transparent bg-green-500/10 text-green-600 dark:text-green-400',\n warning:\n 'border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n danger: 'border-transparent bg-destructive/10 text-destructive',\n};\n\nconst outlinedColorClasses: Record<string, string> = {\n default: 'border-border text-foreground',\n primary: 'border-primary text-primary',\n success: 'border-green-500 text-green-600 dark:text-green-400',\n warning: 'border-yellow-500 text-yellow-600 dark:text-yellow-400',\n danger: 'border-destructive text-destructive',\n};\n\nconst Tag = ({\n className,\n variant = 'default',\n color = 'default',\n children,\n ...props\n}: Props) => {\n return (\n <Core\n variant=\"outline\"\n className={cn(\n 'rounded-full px-2.5 py-1',\n 'text-xs font-medium',\n variant === 'default' && fillColorClasses[color],\n variant === 'outlined' && outlinedColorClasses[color],\n className,\n //\n )}\n {...props}\n >\n {children}\n </Core>\n );\n};\n\nexport default Tag;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tag.mjs","names":["badge.Badge"],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["import { badge } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = badge.Badge;\ntype BadgeProps = badge.Props;\n\nexport interface Props extends Omit<BadgeProps, 'variant'> {\n variant?: 'default' | 'outlined';\n color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';\n}\n\nconst fillColorClasses: Record<string, string> = {\n default: 'border-transparent bg-muted text-muted-foreground',\n primary: 'border-transparent bg-primary/10 text-primary',\n success:\n 'border-transparent bg-green-500/10 text-green-600 dark:text-green-400',\n warning:\n 'border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n danger: 'border-transparent bg-destructive/10 text-destructive',\n};\n\nconst outlinedColorClasses: Record<string, string> = {\n default: 'border-border text-foreground',\n primary: 'border-primary text-primary',\n success: 'border-green-500 text-green-600 dark:text-green-400',\n warning: 'border-yellow-500 text-yellow-600 dark:text-yellow-400',\n danger: 'border-destructive text-destructive',\n};\n\nconst Tag = ({\n className,\n variant = 'default',\n color = 'default',\n children,\n ...props\n}: Props) => {\n return (\n <Core\n variant=\"outline\"\n className={cn(\n 'rounded-full px-2.5 py-1',\n 'text-xs font-medium',\n variant === 'default' && fillColorClasses[color],\n variant === 'outlined' && outlinedColorClasses[color],\n className,\n //\n )}\n {...props}\n >\n {children}\n </Core>\n );\n};\n\nexport default Tag;\n"],"mappings":";;;;;AAGA,MAAM,OAAOA;AAQb,MAAM,mBAA2C;CAC/C,SAAS;CACT,SAAS;CACT,SACE;CACF,SACE;CACF,QAAQ;CACT;AAED,MAAM,uBAA+C;CACnD,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACT;AAED,MAAM,OAAO,EACX,WACA,UAAU,WACV,QAAQ,WACR,UACA,GAAG,YACQ;AACX,QACE,oBAAC;EACC,SAAQ;EACR,WAAW,GACT,4BACA,uBACA,YAAY,aAAa,iBAAiB,QAC1C,YAAY,cAAc,qBAAqB,QAC/C,UAED;EACD,GAAI;EAEH;GACI"}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
import { cn } from "../../../utils.mjs";
|
|
4
4
|
import { checkbox_exports } from "../../../core/checkbox.mjs";
|
|
5
5
|
import { label_exports } from "../../../core/label.mjs";
|
|
6
|
-
import "../../../core.mjs";
|
|
7
6
|
import { Square, SquareCheck } from "lucide-react";
|
|
8
7
|
import { useId, useState } from "react";
|
|
9
8
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { checkbox, label } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> {\n placement?: 'left' | 'right';\n defaultChecked?: boolean;\n checked?: boolean;\n value?: OptionValue;\n disabled?: boolean;\n icons?: { checked: React.ReactNode; unchecked: React.ReactNode };\n children?: React.ReactNode;\n onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n placement = 'left',\n value = '',\n children,\n className,\n icons,\n disabled,\n defaultChecked,\n checked: _checked,\n onChange: _onChange = () => {},\n ...props\n}: Props) => {\n const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n defaultChecked || false,\n );\n\n const reactId = useId();\n\n const id = typeof value === 'boolean' || !value ? reactId : String(value);\n const controlled = _checked !== undefined;\n const checked = controlled ? _checked : uncontrolledChecked;\n\n const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n const onChange = (next: boolean) => {\n if (disabled) {\n return;\n }\n\n if (!controlled) {\n setUncontrolledChecked(next);\n }\n _onChange(next);\n };\n\n const renderContent = icons ? (\n <>\n <input\n id={id}\n hidden\n type=\"checkbox\"\n checked={checked}\n onChange={e => {\n onChange(e.target.checked);\n }}\n />\n <span\n className={cn(cursorClassName, disabled && 'opacity-50')}\n onClick={() => {\n document.getElementById(id)?.click();\n }}\n >\n {checked\n ? (icons.checked ?? <SquareCheck />)\n : (icons.unchecked ?? <Square />)}\n </span>\n {children && (\n <label\n className={cn(cursorClassName, disabled && 'opacity-50')}\n htmlFor={id}\n >\n {children}\n </label>\n )}\n </>\n ) : (\n <>\n <CoreCheckbox\n id={id}\n checked={checked}\n disabled={disabled}\n className={cn(cursorClassName)}\n onCheckedChange={onChange}\n />\n {children && (\n <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n {children}\n </CoreLabel>\n )}\n </>\n );\n\n return (\n <div\n className={cn(\n 'flex items-center gap-x-2',\n placement === 'right' && 'flex-row-reverse',\n cursorClassName,\n className,\n //\n )}\n {...props}\n >\n {renderContent}\n </div>\n );\n};\n\nexport default Checkbox;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { checkbox, label } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> {\n placement?: 'left' | 'right';\n defaultChecked?: boolean;\n checked?: boolean;\n value?: OptionValue;\n disabled?: boolean;\n icons?: { checked: React.ReactNode; unchecked: React.ReactNode };\n children?: React.ReactNode;\n onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n placement = 'left',\n value = '',\n children,\n className,\n icons,\n disabled,\n defaultChecked,\n checked: _checked,\n onChange: _onChange = () => {},\n ...props\n}: Props) => {\n const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n defaultChecked || false,\n );\n\n const reactId = useId();\n\n const id = typeof value === 'boolean' || !value ? reactId : String(value);\n const controlled = _checked !== undefined;\n const checked = controlled ? _checked : uncontrolledChecked;\n\n const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n const onChange = (next: boolean) => {\n if (disabled) {\n return;\n }\n\n if (!controlled) {\n setUncontrolledChecked(next);\n }\n _onChange(next);\n };\n\n const renderContent = icons ? (\n <>\n <input\n id={id}\n hidden\n type=\"checkbox\"\n checked={checked}\n onChange={e => {\n onChange(e.target.checked);\n }}\n />\n <span\n className={cn(cursorClassName, disabled && 'opacity-50')}\n onClick={() => {\n document.getElementById(id)?.click();\n }}\n >\n {checked\n ? (icons.checked ?? <SquareCheck />)\n : (icons.unchecked ?? <Square />)}\n </span>\n {children && (\n <label\n className={cn(cursorClassName, disabled && 'opacity-50')}\n htmlFor={id}\n >\n {children}\n </label>\n )}\n </>\n ) : (\n <>\n <CoreCheckbox\n id={id}\n checked={checked}\n disabled={disabled}\n className={cn(cursorClassName)}\n onCheckedChange={onChange}\n />\n {children && (\n <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n {children}\n </CoreLabel>\n )}\n </>\n );\n\n return (\n <div\n className={cn(\n 'flex items-center gap-x-2',\n placement === 'right' && 'flex-row-reverse',\n cursorClassName,\n className,\n //\n )}\n {...props}\n >\n {renderContent}\n </div>\n );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAgB7B,MAAM,YAAY,EAChB,YAAY,QACZ,QAAQ,IACR,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,UAAU,OAAO;CAEvB,MAAM,KAAK,OAAO,UAAU,aAAa,CAAC,QAAQ,UAAU,OAAO,MAAM;CACzE,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAGjB,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACI;GACT,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,eAAe,GAAG,EAAE,OAAO;;aAGrC,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GAEH,8CACE,oBAAC;EACK;EACK;EACC;EACV,WAAW,GAAG,gBAAgB;EAC9B,iBAAiB;GACjB,EACD,YACC,oBAAC;EAAU,SAAS;EAAI,WAAW,GAAG,iBAAiB,YAAY;EAChE;GACS,IAEb;AAGL,QACE,oBAAC;EACC,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,UAED;EACD,GAAI;YAEH;GACG"}
|
|
@@ -10,6 +10,7 @@ import { useWindowScroll } from "@uidotdev/usehooks";
|
|
|
10
10
|
const BackTop = ({ visibilityHeight = 450, className, onClick, ...props }) => {
|
|
11
11
|
const [{ y }, scrollTo] = useWindowScroll();
|
|
12
12
|
return /* @__PURE__ */ jsx(FloatButton, {
|
|
13
|
+
"aria-label": "맨 위로",
|
|
13
14
|
icon: /* @__PURE__ */ jsx(ArrowUp, {}),
|
|
14
15
|
className: cn(className, (!y || visibilityHeight > y) && "hidden"),
|
|
15
16
|
onClick: (e) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"back-top.mjs","names":[],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"sourcesContent":["'use client';\n\nimport { MouseEvent } from 'react';\n\nimport { useWindowScroll } from '@uidotdev/usehooks';\nimport { ArrowUp } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { type Props as ButtonProps } from '../button';\nimport FloatButton from './float-button';\n\nexport interface Props extends ButtonProps {\n visibilityHeight?: number;\n onClick?: (e: MouseEvent<HTMLElement>) => void;\n}\n\nconst BackTop = ({\n visibilityHeight = 450,\n className,\n onClick,\n ...props\n}: Props) => {\n const [{ y }, scrollTo] = useWindowScroll();\n\n return (\n <FloatButton\n icon={<ArrowUp />}\n className={cn(\n className,\n (!y || visibilityHeight > y) && 'hidden',\n //\n )}\n onClick={e => {\n scrollTo({ left: 0, top: 0, behavior: 'smooth' });\n onClick?.(e);\n }}\n {...props}\n />\n );\n};\n\nexport default BackTop;\n"],"mappings":";;;;;;;;;AAiBA,MAAM,WAAW,EACf,mBAAmB,KACnB,WACA,SACA,GAAG,YACQ;CACX,MAAM,CAAC,EAAE,KAAK,YAAY,iBAAiB;AAE3C,QACE,oBAAC;EACC,MAAM,oBAAC,YAAU;EACjB,WAAW,GACT,YACC,CAAC,KAAK,mBAAmB,MAAM,SAEjC;EACD,UAAS,MAAK;AACZ,YAAS;IAAE,MAAM;IAAG,KAAK;IAAG,UAAU;IAAU,CAAC;AACjD,aAAU,EAAE;;EAEd,GAAI;GACJ"}
|
|
1
|
+
{"version":3,"file":"back-top.mjs","names":[],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"sourcesContent":["'use client';\n\nimport { MouseEvent } from 'react';\n\nimport { useWindowScroll } from '@uidotdev/usehooks';\nimport { ArrowUp } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { type Props as ButtonProps } from '../button';\nimport FloatButton from './float-button';\n\nexport interface Props extends ButtonProps {\n visibilityHeight?: number;\n onClick?: (e: MouseEvent<HTMLElement>) => void;\n}\n\nconst BackTop = ({\n visibilityHeight = 450,\n className,\n onClick,\n ...props\n}: Props) => {\n const [{ y }, scrollTo] = useWindowScroll();\n\n return (\n <FloatButton\n aria-label=\"맨 위로\"\n icon={<ArrowUp />}\n className={cn(\n className,\n (!y || visibilityHeight > y) && 'hidden',\n //\n )}\n onClick={e => {\n scrollTo({ left: 0, top: 0, behavior: 'smooth' });\n onClick?.(e);\n }}\n {...props}\n />\n );\n};\n\nexport default BackTop;\n"],"mappings":";;;;;;;;;AAiBA,MAAM,WAAW,EACf,mBAAmB,KACnB,WACA,SACA,GAAG,YACQ;CACX,MAAM,CAAC,EAAE,KAAK,YAAY,iBAAiB;AAE3C,QACE,oBAAC;EACC,cAAW;EACX,MAAM,oBAAC,YAAU;EACjB,WAAW,GACT,YACC,CAAC,KAAK,mBAAmB,MAAM,SAEjC;EACD,UAAS,MAAK;AACZ,YAAS;IAAE,MAAM;IAAG,KAAK;IAAG,UAAU;IAAU,CAAC;AACjD,aAAU,EAAE;;EAEd,GAAI;GACJ"}
|
|
@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
5
5
|
//#region src/components/atoms/float-button/float-button.tsx
|
|
6
6
|
const FloatButton = ({ className, children, ...props }) => {
|
|
7
7
|
return /* @__PURE__ */ jsx(Button, {
|
|
8
|
-
className: cn("fixed right-5 bottom-5 rounded-full", "
|
|
8
|
+
className: cn("fixed right-5 bottom-5 rounded-full", "z-50 h-12 w-12", "shadow-md", className),
|
|
9
9
|
variant: "outlined",
|
|
10
10
|
...props,
|
|
11
11
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"float-button.mjs","names":[],"sources":["../../../../src/components/atoms/float-button/float-button.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport Button, { Props as ButtonProps } from '../button';\n\nexport interface Props extends ButtonProps {}\n\nconst FloatButton = ({ className, children, ...props }: Props) => {\n return (\n <Button\n className={cn(\n 'fixed right-5 bottom-5 rounded-full',\n '
|
|
1
|
+
{"version":3,"file":"float-button.mjs","names":[],"sources":["../../../../src/components/atoms/float-button/float-button.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport Button, { Props as ButtonProps } from '../button';\n\nexport interface Props extends ButtonProps {}\n\nconst FloatButton = ({ className, children, ...props }: Props) => {\n return (\n <Button\n className={cn(\n 'fixed right-5 bottom-5 rounded-full',\n 'z-50 h-12 w-12',\n 'shadow-md',\n className,\n )}\n variant=\"outlined\"\n {...props}\n >\n {children}\n </Button>\n );\n};\n\nexport default FloatButton;\n"],"mappings":";;;;;AAMA,MAAM,eAAe,EAAE,WAAW,UAAU,GAAG,YAAmB;AAChE,QACE,oBAAC;EACC,WAAW,GACT,uCACA,kBACA,aACA,UACD;EACD,SAAQ;EACR,GAAI;EAEH;GACM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.mjs","names":["input"],"sources":["../../../../src/components/atoms/input/input.tsx"],"sourcesContent":["import { input } from '@repo/ui/core';\n\nconst { Input: Core } = input;\n\nconst Input = ({ ...props }: React.ComponentPropsWithoutRef<'input'>) => {\n return <Core {...props} />;\n};\n\nexport default Input;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.mjs","names":["input"],"sources":["../../../../src/components/atoms/input/input.tsx"],"sourcesContent":["import { input } from '@repo/ui/core';\n\nconst { Input: Core } = input;\n\nconst Input = ({ ...props }: React.ComponentPropsWithoutRef<'input'>) => {\n return <Core {...props} />;\n};\n\nexport default Input;\n"],"mappings":";;;;AAEA,MAAM,EAAE,OAAO,SAASA;AAExB,MAAM,SAAS,EAAE,GAAG,YAAqD;AACvE,QAAO,oBAAC,QAAK,GAAI,QAAS"}
|
|
@@ -2,10 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
import { cn } from "../../../utils.mjs";
|
|
4
4
|
import { input_exports } from "../../../core/input.mjs";
|
|
5
|
-
import "../../../core.mjs";
|
|
6
5
|
import Button from "../../../Button.mjs";
|
|
7
6
|
import { CircleX, Search } from "lucide-react";
|
|
8
|
-
import { useRef } from "react";
|
|
7
|
+
import { useRef, useState } from "react";
|
|
9
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
9
|
|
|
11
10
|
//#region src/components/atoms/input/search.tsx
|
|
@@ -13,9 +12,12 @@ const { Input: Core } = input_exports;
|
|
|
13
12
|
const Search$1 = ({ ref, className, defaultValue, value, allowClear = true, onChange, onSearch: _onSearch, ...props }) => {
|
|
14
13
|
const internalRef = useRef(null);
|
|
15
14
|
const inputRef = ref || internalRef;
|
|
15
|
+
const [uncontrolledHasValue, setUncontrolledHasValue] = useState(!!defaultValue);
|
|
16
|
+
const hasValue = value !== void 0 ? !!value : uncontrolledHasValue;
|
|
16
17
|
const onClear = () => {
|
|
17
18
|
if (inputRef.current) {
|
|
18
19
|
inputRef.current.value = "";
|
|
20
|
+
if (value === void 0) setUncontrolledHasValue(false);
|
|
19
21
|
onChange?.({ target: { value: "" } });
|
|
20
22
|
}
|
|
21
23
|
};
|
|
@@ -34,13 +36,16 @@ const Search$1 = ({ ref, className, defaultValue, value, allowClear = true, onCh
|
|
|
34
36
|
className: cn("rounded-r-none", "[&::-webkit-search-cancel-button]:hidden", "[&::-webkit-search-decoration]:hidden"),
|
|
35
37
|
value,
|
|
36
38
|
defaultValue,
|
|
37
|
-
onChange
|
|
39
|
+
onChange: (e) => {
|
|
40
|
+
if (value === void 0) setUncontrolledHasValue(!!e.target.value);
|
|
41
|
+
onChange?.(e);
|
|
42
|
+
},
|
|
38
43
|
onKeyDown: (e) => {
|
|
39
44
|
if (e.key === "Enter") onSearch();
|
|
40
45
|
},
|
|
41
46
|
...props
|
|
42
47
|
}), /* @__PURE__ */ jsx(CircleX, {
|
|
43
|
-
className: cn("absolute right-2 size-4", "shrink-0 cursor-pointer", (!allowClear ||
|
|
48
|
+
className: cn("absolute right-2 size-4", "shrink-0 cursor-pointer", (!allowClear || !hasValue) && "hidden"),
|
|
44
49
|
onClick: onClear
|
|
45
50
|
})]
|
|
46
51
|
}), /* @__PURE__ */ jsx(Button, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.mjs","names":["input","Search","SearchOutlined"],"sources":["../../../../src/components/atoms/input/search.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\n\nimport { CircleX, Search as SearchOutlined } from 'lucide-react';\n\nimport { input } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\n\nconst { Input: Core } = input;\n\nexport interface Props extends React.ComponentPropsWithRef<'input'> {\n allowClear?: boolean;\n onChange?: (\n e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } },\n ) => void;\n onSearch?: (value: string) => void;\n}\n\nconst Search = ({\n ref,\n className,\n defaultValue,\n value,\n allowClear = true,\n onChange,\n onSearch: _onSearch,\n ...props\n}: Props) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const inputRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;\n\n const onClear = () => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n const event = {\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>;\n onChange?.(event);\n }\n };\n\n const onSearch = () => {\n if (inputRef.current) {\n _onSearch?.(inputRef.current.value);\n }\n };\n\n return (\n <div\n className={cn(\n 'flex items-center',\n 'rounded-md',\n className,\n //\n )}\n >\n <div\n className={cn(\n 'relative grow',\n 'inline-flex items-center',\n //\n )}\n >\n <Core\n ref={inputRef}\n inputMode=\"search\"\n type=\"search\"\n enterKeyHint=\"search\"\n className={cn(\n 'rounded-r-none',\n '[&::-webkit-search-cancel-button]:hidden',\n '[&::-webkit-search-decoration]:hidden',\n //\n )}\n value={value}\n defaultValue={defaultValue}\n onChange={onChange}\n onKeyDown={e => {\n if (e.key === 'Enter') {\n onSearch();\n }\n }}\n {...props}\n />\n <CircleX\n className={cn(\n 'absolute right-2 size-4',\n 'shrink-0 cursor-pointer',\n (!allowClear ||
|
|
1
|
+
{"version":3,"file":"search.mjs","names":["input","Search","SearchOutlined"],"sources":["../../../../src/components/atoms/input/search.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { CircleX, Search as SearchOutlined } from 'lucide-react';\n\nimport { input } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\n\nconst { Input: Core } = input;\n\nexport interface Props extends React.ComponentPropsWithRef<'input'> {\n allowClear?: boolean;\n onChange?: (\n e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } },\n ) => void;\n onSearch?: (value: string) => void;\n}\n\nconst Search = ({\n ref,\n className,\n defaultValue,\n value,\n allowClear = true,\n onChange,\n onSearch: _onSearch,\n ...props\n}: Props) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const inputRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;\n\n const [uncontrolledHasValue, setUncontrolledHasValue] =\n useState(!!defaultValue);\n const hasValue = value !== undefined ? !!value : uncontrolledHasValue;\n\n const onClear = () => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n if (value === undefined) {\n setUncontrolledHasValue(false);\n }\n\n const event = {\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>;\n onChange?.(event);\n }\n };\n\n const onSearch = () => {\n if (inputRef.current) {\n _onSearch?.(inputRef.current.value);\n }\n };\n\n return (\n <div\n className={cn(\n 'flex items-center',\n 'rounded-md',\n className,\n //\n )}\n >\n <div\n className={cn(\n 'relative grow',\n 'inline-flex items-center',\n //\n )}\n >\n <Core\n ref={inputRef}\n inputMode=\"search\"\n type=\"search\"\n enterKeyHint=\"search\"\n className={cn(\n 'rounded-r-none',\n '[&::-webkit-search-cancel-button]:hidden',\n '[&::-webkit-search-decoration]:hidden',\n //\n )}\n value={value}\n defaultValue={defaultValue}\n onChange={e => {\n if (value === undefined) {\n setUncontrolledHasValue(!!e.target.value);\n }\n onChange?.(e);\n }}\n onKeyDown={e => {\n if (e.key === 'Enter') {\n onSearch();\n }\n }}\n {...props}\n />\n <CircleX\n className={cn(\n 'absolute right-2 size-4',\n 'shrink-0 cursor-pointer',\n (!allowClear || !hasValue) && 'hidden',\n )}\n onClick={onClear}\n />\n </div>\n <Button\n icon={<SearchOutlined />}\n className={cn(\n 'rounded-l-none',\n 'size-9',\n //\n )}\n onClick={onSearch}\n />\n </div>\n );\n};\n\nSearch.displayName = 'Search';\n\nexport default Search;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,EAAE,OAAO,SAASA;AAUxB,MAAMC,YAAU,EACd,KACA,WACA,cACA,OACA,aAAa,MACb,UACA,UAAU,WACV,GAAG,YACQ;CACX,MAAM,cAAc,OAAyB,KAAK;CAClD,MAAM,WAAY,OAA6C;CAE/D,MAAM,CAAC,sBAAsB,2BAC3B,SAAS,CAAC,CAAC,aAAa;CAC1B,MAAM,WAAW,UAAU,SAAY,CAAC,CAAC,QAAQ;CAEjD,MAAM,gBAAgB;AACpB,MAAI,SAAS,SAAS;AACpB,YAAS,QAAQ,QAAQ;AAEzB,OAAI,UAAU,OACZ,yBAAwB,MAAM;AAMhC,cAHc,EACZ,QAAQ,EAAE,OAAO,IAAI,EACtB,CACgB;;;CAIrB,MAAM,iBAAiB;AACrB,MAAI,SAAS,QACX,aAAY,SAAS,QAAQ,MAAM;;AAIvC,QACE,qBAAC;EACC,WAAW,GACT,qBACA,cACA,UAED;aAED,qBAAC;GACC,WAAW,GACT,iBACA,2BAED;cAED,oBAAC;IACC,KAAK;IACL,WAAU;IACV,MAAK;IACL,cAAa;IACb,WAAW,GACT,kBACA,4CACA,wCAED;IACM;IACO;IACd,WAAU,MAAK;AACb,SAAI,UAAU,OACZ,yBAAwB,CAAC,CAAC,EAAE,OAAO,MAAM;AAE3C,gBAAW,EAAE;;IAEf,YAAW,MAAK;AACd,SAAI,EAAE,QAAQ,QACZ,WAAU;;IAGd,GAAI;KACJ,EACF,oBAAC;IACC,WAAW,GACT,2BACA,4BACC,CAAC,cAAc,CAAC,aAAa,SAC/B;IACD,SAAS;KACT;IACE,EACN,oBAAC;GACC,MAAM,oBAACC,WAAiB;GACxB,WAAW,GACT,kBACA,SAED;GACD,SAAS;IACT;GACE;;AAIV,SAAO,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-area.mjs","names":["textarea"],"sources":["../../../../src/components/atoms/input/text-area.tsx"],"sourcesContent":["import { textarea } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Textarea: Core } = textarea;\n\nconst TextArea = ({\n className,\n ref,\n ...props\n}: React.ComponentPropsWithRef<'textarea'>) => {\n return (\n <Core\n ref={ref}\n className={cn(\n className,\n //\n )}\n {...props}\n />\n );\n};\n\nexport default TextArea;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"text-area.mjs","names":["textarea"],"sources":["../../../../src/components/atoms/input/text-area.tsx"],"sourcesContent":["import { textarea } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Textarea: Core } = textarea;\n\nconst TextArea = ({\n className,\n ref,\n ...props\n}: React.ComponentPropsWithRef<'textarea'>) => {\n return (\n <Core\n ref={ref}\n className={cn(\n className,\n //\n )}\n {...props}\n />\n );\n};\n\nexport default TextArea;\n"],"mappings":";;;;;AAGA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,YAAY,EAChB,WACA,KACA,GAAG,YAC0C;AAC7C,QACE,oBAAC;EACM;EACL,WAAW,GACT,UAED;EACD,GAAI;GACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.mjs","names":["popover"],"sources":["../../../src/components/atoms/popover.tsx"],"sourcesContent":["import { popover } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Typography from './typography';\n\nconst { Popover: CorePopover, PopoverContent, PopoverTrigger } = popover;\n\ntype Placement =\n | 'top'\n | 'left'\n | 'right'\n | 'bottom'\n | 'topLeft'\n | 'topRight'\n | 'bottomLeft'\n | 'bottomRight'\n | 'leftTop'\n | 'leftBottom'\n | 'rightTop'\n | 'rightBottom';\n\ninterface Props extends Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'title' | 'content'\n> {\n title?: React.ReactNode;\n placement?: Placement;\n content: React.ReactNode;\n}\n\nconst placementMap = {\n top: {\n side: 'top',\n align: 'center',\n },\n left: {\n side: 'left',\n align: 'center',\n },\n right: {\n side: 'right',\n align: 'center',\n },\n bottom: {\n side: 'bottom',\n align: 'center',\n },\n topLeft: {\n side: 'top',\n align: 'start',\n },\n topRight: {\n side: 'top',\n align: 'end',\n },\n bottomLeft: {\n side: 'bottom',\n align: 'start',\n },\n bottomRight: {\n side: 'bottom',\n align: 'end',\n },\n leftTop: {\n side: 'left',\n align: 'start',\n },\n leftBottom: {\n side: 'left',\n align: 'end',\n },\n rightTop: {\n side: 'right',\n align: 'start',\n },\n rightBottom: {\n side: 'right',\n align: 'end',\n },\n} as const;\n\nconst beforeBase = 'before:content-[\"\"] before:absolute before:h-0 before:w-0';\nconst afterBase = 'after:content-[\"\"] after:absolute after:h-0 after:w-0';\n\nconst vBorderShape =\n 'before:border-l-[9px] before:border-r-[9px] before:border-l-transparent before:border-r-transparent';\nconst hBorderShape =\n 'before:border-t-[9px] before:border-b-[9px] before:border-t-transparent before:border-b-transparent';\nconst vFillShape =\n 'after:border-l-8 after:border-r-8 after:border-l-transparent after:border-r-transparent';\nconst hFillShape =\n 'after:border-t-8 after:border-b-8 after:border-t-transparent after:border-b-transparent';\n\nconst topBorder = 'before:border-t-[9px] before:border-t-border';\nconst bottomBorder = 'before:border-b-[9px] before:border-b-border';\nconst leftBorder = 'before:border-l-[9px] before:border-l-border';\nconst rightBorder = 'before:border-r-[9px] before:border-r-border';\nconst topFill = 'after:border-t-8 after:border-t-popover';\nconst bottomFill = 'after:border-b-8 after:border-b-popover';\nconst leftFill = 'after:border-l-8 after:border-l-popover';\nconst rightFill = 'after:border-r-8 after:border-r-popover';\n\nconst arrowStyles: Record<Placement, string> = {\n top: [\n 'absolute left-1/2 -translate-x-1/2 top-full',\n beforeBase,\n 'before:top-0 before:left-1/2 before:-translate-x-1/2',\n vBorderShape,\n topBorder,\n afterBase,\n 'after:-top-px after:left-1/2 after:-translate-x-1/2',\n vFillShape,\n topFill,\n ].join(' '),\n topLeft: [\n 'absolute left-4 top-full',\n beforeBase,\n 'before:top-0 before:left-0',\n vBorderShape,\n topBorder,\n afterBase,\n 'after:-top-px after:left-px',\n vFillShape,\n topFill,\n ].join(' '),\n topRight: [\n 'absolute right-4 top-full',\n beforeBase,\n 'before:top-0 before:right-0',\n vBorderShape,\n topBorder,\n afterBase,\n 'after:-top-px after:right-px',\n vFillShape,\n topFill,\n ].join(' '),\n bottom: [\n 'absolute left-1/2 -translate-x-1/2 bottom-full',\n beforeBase,\n 'before:bottom-0 before:left-1/2 before:-translate-x-1/2',\n vBorderShape,\n bottomBorder,\n afterBase,\n 'after:-bottom-px after:left-1/2 after:-translate-x-1/2',\n vFillShape,\n bottomFill,\n ].join(' '),\n bottomLeft: [\n 'absolute left-4 bottom-full',\n beforeBase,\n 'before:bottom-0 before:left-0',\n vBorderShape,\n bottomBorder,\n afterBase,\n 'after:-bottom-px after:left-px',\n vFillShape,\n bottomFill,\n ].join(' '),\n bottomRight: [\n 'absolute right-4 bottom-full',\n beforeBase,\n 'before:bottom-0 before:right-0',\n vBorderShape,\n bottomBorder,\n afterBase,\n 'after:-bottom-px after:right-px',\n vFillShape,\n bottomFill,\n ].join(' '),\n left: [\n 'absolute top-1/2 -translate-y-1/2 left-full',\n beforeBase,\n 'before:left-0 before:top-1/2 before:-translate-y-1/2',\n hBorderShape,\n leftBorder,\n afterBase,\n 'after:-left-px after:top-1/2 after:-translate-y-1/2',\n hFillShape,\n leftFill,\n ].join(' '),\n leftTop: [\n 'absolute top-4 left-full',\n beforeBase,\n 'before:left-0 before:top-0',\n hBorderShape,\n leftBorder,\n afterBase,\n 'after:-left-px after:top-px',\n hFillShape,\n leftFill,\n ].join(' '),\n leftBottom: [\n 'absolute bottom-4 left-full',\n beforeBase,\n 'before:left-0 before:bottom-0',\n hBorderShape,\n leftBorder,\n afterBase,\n 'after:-left-px after:bottom-px',\n hFillShape,\n leftFill,\n ].join(' '),\n right: [\n 'absolute top-1/2 -translate-y-1/2 right-full',\n beforeBase,\n 'before:right-0 before:top-1/2 before:-translate-y-1/2',\n hBorderShape,\n rightBorder,\n afterBase,\n 'after:-right-px after:top-1/2 after:-translate-y-1/2',\n hFillShape,\n rightFill,\n ].join(' '),\n rightTop: [\n 'absolute top-4 right-full',\n beforeBase,\n 'before:right-0 before:top-0',\n hBorderShape,\n rightBorder,\n afterBase,\n 'after:-right-px after:top-px',\n hFillShape,\n rightFill,\n ].join(' '),\n rightBottom: [\n 'absolute bottom-4 right-full',\n beforeBase,\n 'before:right-0 before:bottom-0',\n hBorderShape,\n rightBorder,\n afterBase,\n 'after:-right-px after:bottom-px',\n hFillShape,\n rightFill,\n ].join(' '),\n};\n\nconst Popover = ({\n title,\n placement = 'top',\n className,\n content,\n children,\n}: Props) => {\n return (\n <CorePopover>\n <PopoverTrigger asChild>{children}</PopoverTrigger>\n <PopoverContent\n align={placementMap[placement].align}\n side={placementMap[placement].side}\n sideOffset={16}\n className={cn('relative w-auto', className)}\n >\n {renderConditional(title, v => (\n <Typography.Title level={6}>{v}</Typography.Title>\n ))}\n {content}\n <div className={cn(arrowStyles[placement])} />\n </PopoverContent>\n </CorePopover>\n );\n};\n\nexport default Popover;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"popover.mjs","names":["popover"],"sources":["../../../src/components/atoms/popover.tsx"],"sourcesContent":["import { popover } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Typography from './typography';\n\nconst { Popover: CorePopover, PopoverContent, PopoverTrigger } = popover;\n\ntype Placement =\n | 'top'\n | 'left'\n | 'right'\n | 'bottom'\n | 'topLeft'\n | 'topRight'\n | 'bottomLeft'\n | 'bottomRight'\n | 'leftTop'\n | 'leftBottom'\n | 'rightTop'\n | 'rightBottom';\n\ninterface Props extends Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'title' | 'content'\n> {\n title?: React.ReactNode;\n placement?: Placement;\n content: React.ReactNode;\n}\n\nconst placementMap = {\n top: {\n side: 'top',\n align: 'center',\n },\n left: {\n side: 'left',\n align: 'center',\n },\n right: {\n side: 'right',\n align: 'center',\n },\n bottom: {\n side: 'bottom',\n align: 'center',\n },\n topLeft: {\n side: 'top',\n align: 'start',\n },\n topRight: {\n side: 'top',\n align: 'end',\n },\n bottomLeft: {\n side: 'bottom',\n align: 'start',\n },\n bottomRight: {\n side: 'bottom',\n align: 'end',\n },\n leftTop: {\n side: 'left',\n align: 'start',\n },\n leftBottom: {\n side: 'left',\n align: 'end',\n },\n rightTop: {\n side: 'right',\n align: 'start',\n },\n rightBottom: {\n side: 'right',\n align: 'end',\n },\n} as const;\n\nconst beforeBase = 'before:content-[\"\"] before:absolute before:h-0 before:w-0';\nconst afterBase = 'after:content-[\"\"] after:absolute after:h-0 after:w-0';\n\nconst vBorderShape =\n 'before:border-l-[9px] before:border-r-[9px] before:border-l-transparent before:border-r-transparent';\nconst hBorderShape =\n 'before:border-t-[9px] before:border-b-[9px] before:border-t-transparent before:border-b-transparent';\nconst vFillShape =\n 'after:border-l-8 after:border-r-8 after:border-l-transparent after:border-r-transparent';\nconst hFillShape =\n 'after:border-t-8 after:border-b-8 after:border-t-transparent after:border-b-transparent';\n\nconst topBorder = 'before:border-t-[9px] before:border-t-border';\nconst bottomBorder = 'before:border-b-[9px] before:border-b-border';\nconst leftBorder = 'before:border-l-[9px] before:border-l-border';\nconst rightBorder = 'before:border-r-[9px] before:border-r-border';\nconst topFill = 'after:border-t-8 after:border-t-popover';\nconst bottomFill = 'after:border-b-8 after:border-b-popover';\nconst leftFill = 'after:border-l-8 after:border-l-popover';\nconst rightFill = 'after:border-r-8 after:border-r-popover';\n\nconst arrowStyles: Record<Placement, string> = {\n top: [\n 'absolute left-1/2 -translate-x-1/2 top-full',\n beforeBase,\n 'before:top-0 before:left-1/2 before:-translate-x-1/2',\n vBorderShape,\n topBorder,\n afterBase,\n 'after:-top-px after:left-1/2 after:-translate-x-1/2',\n vFillShape,\n topFill,\n ].join(' '),\n topLeft: [\n 'absolute left-4 top-full',\n beforeBase,\n 'before:top-0 before:left-0',\n vBorderShape,\n topBorder,\n afterBase,\n 'after:-top-px after:left-px',\n vFillShape,\n topFill,\n ].join(' '),\n topRight: [\n 'absolute right-4 top-full',\n beforeBase,\n 'before:top-0 before:right-0',\n vBorderShape,\n topBorder,\n afterBase,\n 'after:-top-px after:right-px',\n vFillShape,\n topFill,\n ].join(' '),\n bottom: [\n 'absolute left-1/2 -translate-x-1/2 bottom-full',\n beforeBase,\n 'before:bottom-0 before:left-1/2 before:-translate-x-1/2',\n vBorderShape,\n bottomBorder,\n afterBase,\n 'after:-bottom-px after:left-1/2 after:-translate-x-1/2',\n vFillShape,\n bottomFill,\n ].join(' '),\n bottomLeft: [\n 'absolute left-4 bottom-full',\n beforeBase,\n 'before:bottom-0 before:left-0',\n vBorderShape,\n bottomBorder,\n afterBase,\n 'after:-bottom-px after:left-px',\n vFillShape,\n bottomFill,\n ].join(' '),\n bottomRight: [\n 'absolute right-4 bottom-full',\n beforeBase,\n 'before:bottom-0 before:right-0',\n vBorderShape,\n bottomBorder,\n afterBase,\n 'after:-bottom-px after:right-px',\n vFillShape,\n bottomFill,\n ].join(' '),\n left: [\n 'absolute top-1/2 -translate-y-1/2 left-full',\n beforeBase,\n 'before:left-0 before:top-1/2 before:-translate-y-1/2',\n hBorderShape,\n leftBorder,\n afterBase,\n 'after:-left-px after:top-1/2 after:-translate-y-1/2',\n hFillShape,\n leftFill,\n ].join(' '),\n leftTop: [\n 'absolute top-4 left-full',\n beforeBase,\n 'before:left-0 before:top-0',\n hBorderShape,\n leftBorder,\n afterBase,\n 'after:-left-px after:top-px',\n hFillShape,\n leftFill,\n ].join(' '),\n leftBottom: [\n 'absolute bottom-4 left-full',\n beforeBase,\n 'before:left-0 before:bottom-0',\n hBorderShape,\n leftBorder,\n afterBase,\n 'after:-left-px after:bottom-px',\n hFillShape,\n leftFill,\n ].join(' '),\n right: [\n 'absolute top-1/2 -translate-y-1/2 right-full',\n beforeBase,\n 'before:right-0 before:top-1/2 before:-translate-y-1/2',\n hBorderShape,\n rightBorder,\n afterBase,\n 'after:-right-px after:top-1/2 after:-translate-y-1/2',\n hFillShape,\n rightFill,\n ].join(' '),\n rightTop: [\n 'absolute top-4 right-full',\n beforeBase,\n 'before:right-0 before:top-0',\n hBorderShape,\n rightBorder,\n afterBase,\n 'after:-right-px after:top-px',\n hFillShape,\n rightFill,\n ].join(' '),\n rightBottom: [\n 'absolute bottom-4 right-full',\n beforeBase,\n 'before:right-0 before:bottom-0',\n hBorderShape,\n rightBorder,\n afterBase,\n 'after:-right-px after:bottom-px',\n hFillShape,\n rightFill,\n ].join(' '),\n};\n\nconst Popover = ({\n title,\n placement = 'top',\n className,\n content,\n children,\n}: Props) => {\n return (\n <CorePopover>\n <PopoverTrigger asChild>{children}</PopoverTrigger>\n <PopoverContent\n align={placementMap[placement].align}\n side={placementMap[placement].side}\n sideOffset={16}\n className={cn('relative w-auto', className)}\n >\n {renderConditional(title, v => (\n <Typography.Title level={6}>{v}</Typography.Title>\n ))}\n {content}\n <div className={cn(arrowStyles[placement])} />\n </PopoverContent>\n </CorePopover>\n );\n};\n\nexport default Popover;\n"],"mappings":";;;;;;AAKA,MAAM,EAAE,SAAS,aAAa,gBAAgB,mBAAmBA;AAyBjE,MAAM,eAAe;CACnB,KAAK;EACH,MAAM;EACN,OAAO;EACR;CACD,MAAM;EACJ,MAAM;EACN,OAAO;EACR;CACD,OAAO;EACL,MAAM;EACN,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,OAAO;EACR;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACR;CACD,YAAY;EACV,MAAM;EACN,OAAO;EACR;CACD,aAAa;EACX,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,OAAO;EACR;CACD,YAAY;EACV,MAAM;EACN,OAAO;EACR;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACR;CACD,aAAa;EACX,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,aAAa;AACnB,MAAM,YAAY;AAElB,MAAM,eACJ;AACF,MAAM,eACJ;AACF,MAAM,aACJ;AACF,MAAM,aACJ;AAEF,MAAM,YAAY;AAClB,MAAM,eAAe;AACrB,MAAM,aAAa;AACnB,MAAM,cAAc;AACpB,MAAM,UAAU;AAChB,MAAM,aAAa;AACnB,MAAM,WAAW;AACjB,MAAM,YAAY;AAElB,MAAM,cAAyC;CAC7C,KAAK;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,UAAU;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,UAAU;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACZ;AAED,MAAM,WAAW,EACf,OACA,YAAY,OACZ,WACA,SACA,eACW;AACX,QACE,qBAAC,0BACC,oBAAC;EAAe;EAAS;GAA0B,EACnD,qBAAC;EACC,OAAO,aAAa,WAAW;EAC/B,MAAM,aAAa,WAAW;EAC9B,YAAY;EACZ,WAAW,GAAG,mBAAmB,UAAU;;GAE1C,kBAAkB,QAAO,MACxB,oBAAC,WAAW;IAAM,OAAO;cAAI;KAAqB,CAClD;GACD;GACD,oBAAC,SAAI,WAAW,GAAG,YAAY,WAAW,GAAI;;GAC/B,IACL"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.mjs","names":["progress"],"sources":["../../../src/components/atoms/progress.tsx"],"sourcesContent":["import { progress } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Progress: Core } = progress;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n value: number;\n direction?: 'horizontal' | 'vertical';\n classNames?: {\n background?: string;\n bar?: string;\n };\n}\n\nconst Progress = ({\n value,\n className,\n direction = 'horizontal',\n classNames,\n //\n}: Props) => {\n const isHorizontal = direction === 'horizontal';\n const dimension = isHorizontal ? 'width' : 'height';\n const normalizedValue = Number.isFinite(value)\n ? Math.min(100, Math.max(0, value))\n : 0;\n\n return (\n <Core\n value={normalizedValue}\n className={cn(\n isHorizontal ? 'h-4 w-full' : 'flex h-full w-4 flex-col justify-end',\n className,\n classNames?.background,\n //\n )}\n barClassName={cn('flex-none', classNames?.bar)}\n barStyle={{\n transform: 'none',\n [dimension]: `${normalizedValue}%`,\n //\n }}\n />\n );\n};\n\nexport default Progress;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"progress.mjs","names":["progress"],"sources":["../../../src/components/atoms/progress.tsx"],"sourcesContent":["import { progress } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Progress: Core } = progress;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n value: number;\n direction?: 'horizontal' | 'vertical';\n classNames?: {\n background?: string;\n bar?: string;\n };\n}\n\nconst Progress = ({\n value,\n className,\n direction = 'horizontal',\n classNames,\n //\n}: Props) => {\n const isHorizontal = direction === 'horizontal';\n const dimension = isHorizontal ? 'width' : 'height';\n const normalizedValue = Number.isFinite(value)\n ? Math.min(100, Math.max(0, value))\n : 0;\n\n return (\n <Core\n value={normalizedValue}\n className={cn(\n isHorizontal ? 'h-4 w-full' : 'flex h-full w-4 flex-col justify-end',\n className,\n classNames?.background,\n //\n )}\n barClassName={cn('flex-none', classNames?.bar)}\n barStyle={{\n transform: 'none',\n [dimension]: `${normalizedValue}%`,\n //\n }}\n />\n );\n};\n\nexport default Progress;\n"],"mappings":";;;;;AAGA,MAAM,EAAE,UAAU,SAASA;AAW3B,MAAM,YAAY,EAChB,OACA,WACA,YAAY,cACZ,iBAEW;CACX,MAAM,eAAe,cAAc;CACnC,MAAM,YAAY,eAAe,UAAU;CAC3C,MAAM,kBAAkB,OAAO,SAAS,MAAM,GAC1C,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,MAAM,CAAC,GACjC;AAEJ,QACE,oBAAC;EACC,OAAO;EACP,WAAW,GACT,eAAe,eAAe,wCAC9B,WACA,YAAY,WAEb;EACD,cAAc,GAAG,aAAa,YAAY,IAAI;EAC9C,UAAU;GACR,WAAW;IACV,YAAY,GAAG,gBAAgB;GAEjC;GACD"}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
import { cn } from "../../../utils.mjs";
|
|
4
4
|
import { field_exports } from "../../../core/field.mjs";
|
|
5
5
|
import { radio_group_exports } from "../../../core/radio-group.mjs";
|
|
6
|
-
import "../../../core.mjs";
|
|
7
6
|
import { Circle, CircleCheck } from "lucide-react";
|
|
8
7
|
import { useId, useState } from "react";
|
|
9
8
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.mjs","names":["radio","field"],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Circle, CircleCheck } from 'lucide-react';\n\nimport { field, radio } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { type OptionValue } from './group';\n\nconst { RadioGroup: Core, RadioGroupItem: Item } = radio;\nconst { Field, FieldLabel } = field;\n\nexport interface Props extends Omit<\n React.ComponentPropsWithoutRef<typeof Core>,\n 'onChange' | 'value'\n> {\n placement?: 'left' | 'right';\n defaultChecked?: boolean;\n checked?: boolean;\n value?: OptionValue;\n disabled?: boolean;\n icons?: { checked: React.ReactNode; unchecked: React.ReactNode };\n onChange?: (checked: boolean) => void;\n}\n\nconst Radio = ({\n placement = 'left',\n value = '',\n children,\n className,\n icons,\n disabled,\n defaultChecked,\n checked: _checked,\n onChange: _onChange = () => {},\n ...props\n}: Props) => {\n const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n defaultChecked || false,\n );\n\n const reactId = useId();\n const id = typeof value === 'boolean' || !value ? reactId : String(value);\n const controlled = _checked !== undefined;\n const checked = controlled ? _checked : uncontrolledChecked;\n\n const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n const onChange = (next: boolean) => {\n if (disabled) {\n return;\n }\n\n if (!controlled) {\n setUncontrolledChecked(next);\n }\n _onChange(next);\n };\n\n const renderContent = icons ? (\n <>\n <input\n id={id}\n hidden\n type=\"radio\"\n checked={checked}\n onChange={e => {\n onChange(e.target.checked);\n }}\n />\n <span\n className={cn(cursorClassName, disabled && 'opacity-50')}\n onClick={() => {\n document.getElementById(id)?.click();\n }}\n >\n {checked\n ? (icons.checked ?? <CircleCheck />)\n : (icons.unchecked ?? <Circle />)}\n </span>\n {children && (\n <label\n className={cn(cursorClassName, disabled && 'opacity-50')}\n htmlFor={id}\n >\n {children}\n </label>\n )}\n </>\n ) : (\n <Core value={checked ? id : ''} onValueChange={() => onChange(true)}>\n <Field\n orientation=\"horizontal\"\n className={cn(\n 'flex gap-2',\n placement === 'right' && 'flex-row-reverse',\n )}\n data-disabled={disabled}\n >\n <Item value={id} id={id} checked={checked} disabled={disabled} />\n <FieldLabel htmlFor={id} className={cursorClassName}>\n {children}\n </FieldLabel>\n </Field>\n </Core>\n );\n\n return (\n <div\n className={cn(\n 'flex items-center',\n icons && placement === 'right' && 'flex-row-reverse',\n cursorClassName,\n className,\n //\n )}\n {...props}\n >\n {renderContent}\n </div>\n );\n};\n\nexport default Radio;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio.mjs","names":["radio","field"],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Circle, CircleCheck } from 'lucide-react';\n\nimport { field, radio } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { type OptionValue } from './group';\n\nconst { RadioGroup: Core, RadioGroupItem: Item } = radio;\nconst { Field, FieldLabel } = field;\n\nexport interface Props extends Omit<\n React.ComponentPropsWithoutRef<typeof Core>,\n 'onChange' | 'value'\n> {\n placement?: 'left' | 'right';\n defaultChecked?: boolean;\n checked?: boolean;\n value?: OptionValue;\n disabled?: boolean;\n icons?: { checked: React.ReactNode; unchecked: React.ReactNode };\n onChange?: (checked: boolean) => void;\n}\n\nconst Radio = ({\n placement = 'left',\n value = '',\n children,\n className,\n icons,\n disabled,\n defaultChecked,\n checked: _checked,\n onChange: _onChange = () => {},\n ...props\n}: Props) => {\n const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n defaultChecked || false,\n );\n\n const reactId = useId();\n const id = typeof value === 'boolean' || !value ? reactId : String(value);\n const controlled = _checked !== undefined;\n const checked = controlled ? _checked : uncontrolledChecked;\n\n const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n const onChange = (next: boolean) => {\n if (disabled) {\n return;\n }\n\n if (!controlled) {\n setUncontrolledChecked(next);\n }\n _onChange(next);\n };\n\n const renderContent = icons ? (\n <>\n <input\n id={id}\n hidden\n type=\"radio\"\n checked={checked}\n onChange={e => {\n onChange(e.target.checked);\n }}\n />\n <span\n className={cn(cursorClassName, disabled && 'opacity-50')}\n onClick={() => {\n document.getElementById(id)?.click();\n }}\n >\n {checked\n ? (icons.checked ?? <CircleCheck />)\n : (icons.unchecked ?? <Circle />)}\n </span>\n {children && (\n <label\n className={cn(cursorClassName, disabled && 'opacity-50')}\n htmlFor={id}\n >\n {children}\n </label>\n )}\n </>\n ) : (\n <Core value={checked ? id : ''} onValueChange={() => onChange(true)}>\n <Field\n orientation=\"horizontal\"\n className={cn(\n 'flex gap-2',\n placement === 'right' && 'flex-row-reverse',\n )}\n data-disabled={disabled}\n >\n <Item value={id} id={id} checked={checked} disabled={disabled} />\n <FieldLabel htmlFor={id} className={cursorClassName}>\n {children}\n </FieldLabel>\n </Field>\n </Core>\n );\n\n return (\n <div\n className={cn(\n 'flex items-center',\n icons && placement === 'right' && 'flex-row-reverse',\n cursorClassName,\n className,\n //\n )}\n {...props}\n >\n {renderContent}\n </div>\n );\n};\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AACnD,MAAM,EAAE,OAAO,eAAeC;AAe9B,MAAM,SAAS,EACb,YAAY,QACZ,QAAQ,IACR,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,UAAU,OAAO;CACvB,MAAM,KAAK,OAAO,UAAU,aAAa,CAAC,QAAQ,UAAU,OAAO,MAAM;CACzE,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAGjB,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACI;GACT,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,eAAe,GAAG,EAAE,OAAO;;aAGrC,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GAEH,oBAAC;EAAK,OAAO,UAAU,KAAK;EAAI,qBAAqB,SAAS,KAAK;YACjE,qBAAC;GACC,aAAY;GACZ,WAAW,GACT,cACA,cAAc,WAAW,mBAC1B;GACD,iBAAe;cAEf,oBAAC;IAAK,OAAO;IAAQ;IAAa;IAAmB;KAAY,EACjE,oBAAC;IAAW,SAAS;IAAI,WAAW;IACjC;KACU;IACP;GACH;AAGT,QACE,oBAAC;EACC,WAAW,GACT,qBACA,SAAS,cAAc,WAAW,oBAClC,iBACA,UAED;EACD,GAAI;YAEH;GACG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.mjs","names":["select"],"sources":["../../../src/components/atoms/select.tsx"],"sourcesContent":["import React from 'react';\n\nimport { select } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst {\n Select: Core,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectTrigger,\n SelectValue,\n} = select;\n\ninterface Option {\n label: React.ReactNode;\n value: string;\n}\n\ninterface OptionGroup {\n label: React.ReactNode;\n options: Option[];\n}\n\nconst isGroup = (option: Option | OptionGroup): option is OptionGroup => {\n return 'options' in option && Array.isArray(option.options);\n};\n\ninterface Props extends React.ComponentProps<typeof Core> {\n placeholder?: string;\n className?: string;\n options?: (Option | OptionGroup)[];\n onChange?: (value: string) => void;\n}\n\nconst Select = ({\n className,\n placeholder,\n options,\n onChange,\n ...props\n}: Props) => {\n return (\n <Core onValueChange={onChange} {...props}>\n <SelectTrigger className={cn('w-full max-w-48', className)}>\n <SelectValue placeholder={placeholder} />\n </SelectTrigger>\n <SelectContent>\n {options?.map((option, index) =>\n isGroup(option) ? (\n <SelectGroup key={index}>\n <SelectLabel>{option.label}</SelectLabel>\n {option.options.map(item => (\n <SelectItem key={item.value} value={item.value}>\n {item.label}\n </SelectItem>\n ))}\n </SelectGroup>\n ) : (\n <SelectItem key={option.value} value={option.value}>\n {option.label}\n </SelectItem>\n ),\n )}\n </SelectContent>\n </Core>\n );\n};\n\nexport default Select;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"select.mjs","names":["select"],"sources":["../../../src/components/atoms/select.tsx"],"sourcesContent":["import React from 'react';\n\nimport { select } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst {\n Select: Core,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectTrigger,\n SelectValue,\n} = select;\n\ninterface Option {\n label: React.ReactNode;\n value: string;\n}\n\ninterface OptionGroup {\n label: React.ReactNode;\n options: Option[];\n}\n\nconst isGroup = (option: Option | OptionGroup): option is OptionGroup => {\n return 'options' in option && Array.isArray(option.options);\n};\n\ninterface Props extends React.ComponentProps<typeof Core> {\n placeholder?: string;\n className?: string;\n options?: (Option | OptionGroup)[];\n onChange?: (value: string) => void;\n}\n\nconst Select = ({\n className,\n placeholder,\n options,\n onChange,\n ...props\n}: Props) => {\n return (\n <Core onValueChange={onChange} {...props}>\n <SelectTrigger className={cn('w-full max-w-48', className)}>\n <SelectValue placeholder={placeholder} />\n </SelectTrigger>\n <SelectContent>\n {options?.map((option, index) =>\n isGroup(option) ? (\n <SelectGroup key={index}>\n <SelectLabel>{option.label}</SelectLabel>\n {option.options.map(item => (\n <SelectItem key={item.value} value={item.value}>\n {item.label}\n </SelectItem>\n ))}\n </SelectGroup>\n ) : (\n <SelectItem key={option.value} value={option.value}>\n {option.label}\n </SelectItem>\n ),\n )}\n </SelectContent>\n </Core>\n );\n};\n\nexport default Select;\n"],"mappings":";;;;;;AAKA,MAAM,EACJ,QAAQ,MACR,eACA,aACA,YACA,aACA,eACA,gBACEA;AAYJ,MAAM,WAAW,WAAwD;AACvE,QAAO,aAAa,UAAU,MAAM,QAAQ,OAAO,QAAQ;;AAU7D,MAAM,UAAU,EACd,WACA,aACA,SACA,UACA,GAAG,YACQ;AACX,QACE,qBAAC;EAAK,eAAe;EAAU,GAAI;aACjC,oBAAC;GAAc,WAAW,GAAG,mBAAmB,UAAU;aACxD,oBAAC,eAAyB,cAAe;IAC3B,EAChB,oBAAC,2BACE,SAAS,KAAK,QAAQ,UACrB,QAAQ,OAAO,GACb,qBAAC,0BACC,oBAAC,yBAAa,OAAO,QAAoB,EACxC,OAAO,QAAQ,KAAI,SAClB,oBAAC;GAA4B,OAAO,KAAK;aACtC,KAAK;KADS,KAAK,MAET,CACb,KANc,MAOJ,GAEd,oBAAC;GAA8B,OAAO,OAAO;aAC1C,OAAO;KADO,OAAO,MAEX,CAEhB,GACa;GACX"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { cn } from "../../../utils.mjs";
|
|
2
2
|
import { skeleton_exports } from "../../../core/skeleton.mjs";
|
|
3
|
-
import "../../../core.mjs";
|
|
4
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
4
|
|
|
6
5
|
//#region src/components/atoms/skeleton/skeleton.tsx
|
|
@@ -16,7 +15,10 @@ const SIZES = {
|
|
|
16
15
|
const Skeleton = ({ active = true, loading = true, avatar, size = "default", direction = "vertical", count = 1, gap = 6, className, classNames = {}, style, width, height, children, ...props }) => {
|
|
17
16
|
if (!loading) return children;
|
|
18
17
|
return /* @__PURE__ */ jsxs("div", {
|
|
18
|
+
role: "status",
|
|
19
|
+
"aria-label": "로딩 중",
|
|
19
20
|
className: cn("flex items-center gap-3"),
|
|
21
|
+
...props,
|
|
20
22
|
children: [avatar && /* @__PURE__ */ jsx(Core, { className: cn("h-12 w-12", "rounded-xl", !active && "animate-none", classNames.avatar) }), /* @__PURE__ */ jsx("div", {
|
|
21
23
|
className: cn("flex grow", direction === "vertical" && "flex-col", classNames.wrapper),
|
|
22
24
|
style: { gap },
|
|
@@ -29,8 +31,7 @@ const Skeleton = ({ active = true, loading = true, avatar, size = "default", dir
|
|
|
29
31
|
...style,
|
|
30
32
|
width: itemWidth,
|
|
31
33
|
height: itemHeight
|
|
32
|
-
}
|
|
33
|
-
...props
|
|
34
|
+
}
|
|
34
35
|
}, index);
|
|
35
36
|
})
|
|
36
37
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["import { skeleton } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n active?: boolean;\n loading?: boolean;\n avatar?: boolean;\n size?: 'default' | 'small' | 'large';\n count?: number;\n gap?: number;\n direction?: 'horizontal' | 'vertical';\n width?: string | number | (string | number)[];\n height?: string | number | (string | number)[];\n classNames?: {\n wrapper?: string;\n avatar?: string;\n item?: string;\n };\n}\n\nconst SIZES = {\n small: 'w-48 h-4',\n default: 'w-60 h-6',\n large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n active = true,\n loading = true,\n avatar,\n size = 'default',\n direction = 'vertical',\n count = 1,\n gap = 6,\n className,\n classNames = {},\n style,\n width,\n height,\n children,\n ...props\n}: Props) => {\n if (!loading) {\n return children;\n }\n\n return (\n <div\n className={cn(\n 'flex items-center gap-3',\n //\n )}\n >\n {avatar && (\n <Core\n className={cn(\n 'h-12 w-12',\n 'rounded-xl',\n !active && 'animate-none',\n classNames.avatar,\n )}\n />\n )}\n <div\n className={cn(\n 'flex grow',\n direction === 'vertical' && 'flex-col',\n classNames.wrapper,\n )}\n style={{\n gap,\n }}\n >\n {Array.from({ length: count }).map((_, index) => {\n const itemWidth = getValueAtIndex(width, index);\n const itemHeight = getValueAtIndex(height, index);\n\n return (\n <Core\n key={index}\n className={cn(\n 'rounded-md',\n !active && 'animate-none',\n SIZES[size],\n className,\n classNames.item,\n //\n )}\n style={{\n ...style,\n width: itemWidth,\n height: itemHeight,\n }}\n
|
|
1
|
+
{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["import { skeleton } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n active?: boolean;\n loading?: boolean;\n avatar?: boolean;\n size?: 'default' | 'small' | 'large';\n count?: number;\n gap?: number;\n direction?: 'horizontal' | 'vertical';\n width?: string | number | (string | number)[];\n height?: string | number | (string | number)[];\n classNames?: {\n wrapper?: string;\n avatar?: string;\n item?: string;\n };\n}\n\nconst SIZES = {\n small: 'w-48 h-4',\n default: 'w-60 h-6',\n large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n active = true,\n loading = true,\n avatar,\n size = 'default',\n direction = 'vertical',\n count = 1,\n gap = 6,\n className,\n classNames = {},\n style,\n width,\n height,\n children,\n ...props\n}: Props) => {\n if (!loading) {\n return children;\n }\n\n return (\n <div\n role=\"status\"\n aria-label=\"로딩 중\"\n className={cn(\n 'flex items-center gap-3',\n //\n )}\n {...props}\n >\n {avatar && (\n <Core\n className={cn(\n 'h-12 w-12',\n 'rounded-xl',\n !active && 'animate-none',\n classNames.avatar,\n )}\n />\n )}\n <div\n className={cn(\n 'flex grow',\n direction === 'vertical' && 'flex-col',\n classNames.wrapper,\n )}\n style={{\n gap,\n }}\n >\n {Array.from({ length: count }).map((_, index) => {\n const itemWidth = getValueAtIndex(width, index);\n const itemHeight = getValueAtIndex(height, index);\n\n return (\n <Core\n key={index}\n className={cn(\n 'rounded-md',\n !active && 'animate-none',\n SIZES[size],\n className,\n classNames.item,\n //\n )}\n style={{\n ...style,\n width: itemWidth,\n height: itemHeight,\n }}\n />\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;AAGA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,mBAAuB,OAAgB,UAAkB;AAC7D,QAAO,MAAM,QAAQ,MAAM,GAAI,MAAM,UAAU,MAAM,KAAM;;AAoB7D,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,OAAO;CACR;AAED,MAAM,YAAY,EAChB,SAAS,MACT,UAAU,MACV,QACA,OAAO,WACP,YAAY,YACZ,QAAQ,GACR,MAAM,GACN,WACA,aAAa,EAAE,EACf,OACA,OACA,QACA,UACA,GAAG,YACQ;AACX,KAAI,CAAC,QACH,QAAO;AAGT,QACE,qBAAC;EACC,MAAK;EACL,cAAW;EACX,WAAW,GACT,0BAED;EACD,GAAI;aAEH,UACC,oBAAC,QACC,WAAW,GACT,aACA,cACA,CAAC,UAAU,gBACX,WAAW,OACZ,GACD,EAEJ,oBAAC;GACC,WAAW,GACT,aACA,cAAc,cAAc,YAC5B,WAAW,QACZ;GACD,OAAO,EACL,KACD;aAEA,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UAAU;IAC/C,MAAM,YAAY,gBAAgB,OAAO,MAAM;IAC/C,MAAM,aAAa,gBAAgB,QAAQ,MAAM;AAEjD,WACE,oBAAC;KAEC,WAAW,GACT,cACA,CAAC,UAAU,gBACX,MAAM,OACN,WACA,WAAW,KAEZ;KACD,OAAO;MACL,GAAG;MACH,OAAO;MACP,QAAQ;MACT;OAbI,MAcL;KAEJ;IACE;GACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.mjs","names":["switchComponent"],"sources":["../../../src/components/atoms/switch.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { switchComponent } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Switch: Core } = switchComponent;\n\nconst sizeConfig = {\n medium: {\n core: 'default' as const,\n track: 'h-8! w-12!',\n handle: 'size-6!',\n handleChecked:\n 'data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-26px)]',\n fontSize: 'text-xs',\n marginChecked: 'mr-7 ml-2',\n marginUnchecked: 'mr-2 ml-7',\n },\n small: {\n core: 'sm' as const,\n track: 'h-6! w-10!',\n handle: 'size-5!',\n handleChecked:\n 'data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-22px)]',\n fontSize: 'text-[10px]',\n marginChecked: 'mr-6 ml-1.5',\n marginUnchecked: 'mr-1.5 ml-6',\n },\n};\n\ninterface Props extends Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'onChange'\n> {\n classNames?: {\n track?: string;\n handle?: string;\n };\n size?: 'small' | 'medium';\n defaultChecked?: boolean;\n checked?: boolean;\n disabled?: boolean;\n onChange?: (checked: boolean) => void;\n checkedChildren?: React.ReactNode;\n unCheckedChildren?: React.ReactNode;\n}\n\nconst Switch = ({\n className,\n classNames,\n size = 'medium',\n defaultChecked,\n checked: _checked,\n onChange: _onChange = () => {},\n checkedChildren,\n unCheckedChildren,\n ...props\n}: Props) => {\n const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n defaultChecked || false,\n );\n\n const controlled = _checked !== undefined;\n const checked = controlled ? _checked : uncontrolledChecked;\n\n const onChange = (next: boolean) => {\n if (!controlled) {\n setUncontrolledChecked(next);\n }\n _onChange(next);\n };\n\n const hasChildren = !!(checkedChildren || unCheckedChildren);\n const config = sizeConfig[size];\n\n return (\n <Core\n checked={checked}\n size={config.core}\n className={cn(\n 'relative',\n config.track,\n hasChildren && 'w-auto! overflow-hidden',\n className,\n classNames?.track,\n //\n )}\n handleClassName={cn(\n config.handle,\n '!absolute top-1/2 !-translate-y-1/2 !translate-x-0',\n 'transition-[left] duration-200 will-change-[left]',\n config.handleChecked,\n classNames?.handle,\n //\n )}\n onCheckedChange={checked => {\n onChange(checked);\n }}\n {...props}\n >\n {hasChildren && (\n <span\n className={cn(\n `grid leading-none text-white transition-[margin] duration-200\n will-change-[margin]`,\n config.fontSize,\n checked ? config.marginChecked : config.marginUnchecked,\n //\n )}\n >\n <span\n className={cn(\n 'col-start-1 row-start-1 transition-opacity duration-200',\n checked ? 'opacity-100' : 'opacity-0',\n )}\n >\n {checkedChildren}\n </span>\n <span\n className={cn(\n 'col-start-1 row-start-1 transition-opacity duration-200',\n checked ? 'opacity-0' : 'opacity-100',\n )}\n >\n {unCheckedChildren}\n </span>\n </span>\n )}\n </Core>\n );\n};\n\nexport default Switch;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"switch.mjs","names":["switchComponent"],"sources":["../../../src/components/atoms/switch.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { switchComponent } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Switch: Core } = switchComponent;\n\nconst sizeConfig = {\n medium: {\n core: 'default' as const,\n track: 'h-8! w-12!',\n handle: 'size-6!',\n handleChecked:\n 'data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-26px)]',\n fontSize: 'text-xs',\n marginChecked: 'mr-7 ml-2',\n marginUnchecked: 'mr-2 ml-7',\n },\n small: {\n core: 'sm' as const,\n track: 'h-6! w-10!',\n handle: 'size-5!',\n handleChecked:\n 'data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-22px)]',\n fontSize: 'text-[10px]',\n marginChecked: 'mr-6 ml-1.5',\n marginUnchecked: 'mr-1.5 ml-6',\n },\n};\n\ninterface Props extends Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'onChange'\n> {\n classNames?: {\n track?: string;\n handle?: string;\n };\n size?: 'small' | 'medium';\n defaultChecked?: boolean;\n checked?: boolean;\n disabled?: boolean;\n onChange?: (checked: boolean) => void;\n checkedChildren?: React.ReactNode;\n unCheckedChildren?: React.ReactNode;\n}\n\nconst Switch = ({\n className,\n classNames,\n size = 'medium',\n defaultChecked,\n checked: _checked,\n onChange: _onChange = () => {},\n checkedChildren,\n unCheckedChildren,\n ...props\n}: Props) => {\n const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n defaultChecked || false,\n );\n\n const controlled = _checked !== undefined;\n const checked = controlled ? _checked : uncontrolledChecked;\n\n const onChange = (next: boolean) => {\n if (!controlled) {\n setUncontrolledChecked(next);\n }\n _onChange(next);\n };\n\n const hasChildren = !!(checkedChildren || unCheckedChildren);\n const config = sizeConfig[size];\n\n return (\n <Core\n checked={checked}\n size={config.core}\n className={cn(\n 'relative',\n config.track,\n hasChildren && 'w-auto! overflow-hidden',\n className,\n classNames?.track,\n //\n )}\n handleClassName={cn(\n config.handle,\n '!absolute top-1/2 !-translate-y-1/2 !translate-x-0',\n 'transition-[left] duration-200 will-change-[left]',\n config.handleChecked,\n classNames?.handle,\n //\n )}\n onCheckedChange={checked => {\n onChange(checked);\n }}\n {...props}\n >\n {hasChildren && (\n <span\n className={cn(\n `grid leading-none text-white transition-[margin] duration-200\n will-change-[margin]`,\n config.fontSize,\n checked ? config.marginChecked : config.marginUnchecked,\n //\n )}\n >\n <span\n className={cn(\n 'col-start-1 row-start-1 transition-opacity duration-200',\n checked ? 'opacity-100' : 'opacity-0',\n )}\n >\n {checkedChildren}\n </span>\n <span\n className={cn(\n 'col-start-1 row-start-1 transition-opacity duration-200',\n checked ? 'opacity-0' : 'opacity-100',\n )}\n >\n {unCheckedChildren}\n </span>\n </span>\n )}\n </Core>\n );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;;;AAOA,MAAM,EAAE,QAAQ,SAASA;AAEzB,MAAM,aAAa;CACjB,QAAQ;EACN,MAAM;EACN,OAAO;EACP,QAAQ;EACR,eACE;EACF,UAAU;EACV,eAAe;EACf,iBAAiB;EAClB;CACD,OAAO;EACL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,eACE;EACF,UAAU;EACV,eAAe;EACf,iBAAiB;EAClB;CACF;AAmBD,MAAM,UAAU,EACd,WACA,YACA,OAAO,UACP,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,iBACA,mBACA,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,YAAY,SAAkB;AAClC,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAGjB,MAAM,cAAc,CAAC,EAAE,mBAAmB;CAC1C,MAAM,SAAS,WAAW;AAE1B,QACE,oBAAC;EACU;EACT,MAAM,OAAO;EACb,WAAW,GACT,YACA,OAAO,OACP,eAAe,2BACf,WACA,YAAY,MAEb;EACD,iBAAiB,GACf,OAAO,QACP,sDACA,qDACA,OAAO,eACP,YAAY,OAEb;EACD,kBAAiB,YAAW;AAC1B,YAAS,QAAQ;;EAEnB,GAAI;YAEH,eACC,qBAAC;GACC,WAAW,GACT;mCAEA,OAAO,UACP,UAAU,OAAO,gBAAgB,OAAO,gBAEzC;cAED,oBAAC;IACC,WAAW,GACT,2DACA,UAAU,gBAAgB,YAC3B;cAEA;KACI,EACP,oBAAC;IACC,WAAW,GACT,2DACA,UAAU,cAAc,cACzB;cAEA;KACI;IACF;GAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/link.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAE/B,IAAA;EAAQ,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"link.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/link.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAE/B,IAAA;EAAQ,QAAA;EAAA,SAAA;EAAA,MAAA;EAAA,GAAA;EAAA,GAAA;AAAA,GAAgD,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -2,9 +2,11 @@ import { cn } from "../../../utils.mjs";
|
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/components/atoms/typography/link.tsx
|
|
5
|
-
const Link = ({ children, className, ...props }) => {
|
|
5
|
+
const Link = ({ children, className, target, rel, ...props }) => {
|
|
6
6
|
return /* @__PURE__ */ jsx("a", {
|
|
7
7
|
className: cn("underline-offset-1 hover:underline", className),
|
|
8
|
+
target,
|
|
9
|
+
rel: rel ?? (target === "_blank" ? "noopener noreferrer" : void 0),
|
|
8
10
|
...props,
|
|
9
11
|
children
|
|
10
12
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.mjs","names":[],"sources":["../../../../src/components/atoms/typography/link.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'a'> {}\n\nconst Link = ({ children, className, ...props }: Props) => {\n return (\n <a\n className={cn(\n 'underline-offset-1 hover:underline',\n className,\n //\n )}\n {...props}\n >\n {children}\n </a>\n );\n};\n\nexport default Link;\n"],"mappings":";;;;AAIA,MAAM,QAAQ,EAAE,UAAU,WAAW,GAAG,YAAmB;
|
|
1
|
+
{"version":3,"file":"link.mjs","names":[],"sources":["../../../../src/components/atoms/typography/link.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'a'> {}\n\nconst Link = ({ children, className, target, rel, ...props }: Props) => {\n return (\n <a\n className={cn(\n 'underline-offset-1 hover:underline',\n className,\n //\n )}\n target={target}\n rel={rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined)}\n {...props}\n >\n {children}\n </a>\n );\n};\n\nexport default Link;\n"],"mappings":";;;;AAIA,MAAM,QAAQ,EAAE,UAAU,WAAW,QAAQ,KAAK,GAAG,YAAmB;AACtE,QACE,oBAAC;EACC,WAAW,GACT,sCACA,UAED;EACO;EACR,KAAK,QAAQ,WAAW,WAAW,wBAAwB;EAC3D,GAAI;EAEH;GACC"}
|
|
@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
4
4
|
//#region src/components/atoms/typography/text.tsx
|
|
5
5
|
const Text = ({ children, underline, strong, className, ...props }) => {
|
|
6
6
|
return /* @__PURE__ */ jsx("span", {
|
|
7
|
-
className: cn(
|
|
7
|
+
className: cn(underline && "underline", strong && "font-bold", className),
|
|
8
8
|
...props,
|
|
9
9
|
children
|
|
10
10
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.mjs","names":[],"sources":["../../../../src/components/atoms/typography/text.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'span'> {\n underline?: boolean;\n strong?: boolean;\n}\n\nconst Text = ({ children, underline, strong, className, ...props }: Props) => {\n return (\n <span\n className={cn(
|
|
1
|
+
{"version":3,"file":"text.mjs","names":[],"sources":["../../../../src/components/atoms/typography/text.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'span'> {\n underline?: boolean;\n strong?: boolean;\n}\n\nconst Text = ({ children, underline, strong, className, ...props }: Props) => {\n return (\n <span\n className={cn(underline && 'underline', strong && 'font-bold', className)}\n {...props}\n >\n {children}\n </span>\n );\n};\n\nexport default Text;\n"],"mappings":";;;;AAOA,MAAM,QAAQ,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,YAAmB;AAC5E,QACE,oBAAC;EACC,WAAW,GAAG,aAAa,aAAa,UAAU,aAAa,UAAU;EACzE,GAAI;EAEH;GACI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"title.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EAGnC,KAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"title.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EAGnC,KAAA;AAAA;AAAA,cAiBI,KAAA;EAAS,QAAA;EAAA,KAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAA8C,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -3,12 +3,12 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
|
|
4
4
|
//#region src/components/atoms/typography/title.tsx
|
|
5
5
|
const styles = {
|
|
6
|
-
h1: "text-6xl",
|
|
7
|
-
h2: "text-5xl",
|
|
8
|
-
h3: "text-4xl",
|
|
9
|
-
h4: "text-3xl",
|
|
10
|
-
h5: "text-2xl",
|
|
11
|
-
h6: "text-xl"
|
|
6
|
+
h1: "text-4xl sm:text-5xl lg:text-6xl",
|
|
7
|
+
h2: "text-3xl sm:text-4xl lg:text-5xl",
|
|
8
|
+
h3: "text-2xl sm:text-3xl lg:text-4xl",
|
|
9
|
+
h4: "text-xl sm:text-2xl lg:text-3xl",
|
|
10
|
+
h5: "text-lg sm:text-xl lg:text-2xl",
|
|
11
|
+
h6: "text-base sm:text-lg lg:text-xl"
|
|
12
12
|
};
|
|
13
13
|
const Title = ({ children, level = 1, className, ...props }) => {
|
|
14
14
|
const Element = level < 1 || level > 6 ? "h1" : `h${level}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"title.mjs","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<\n 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n> {\n level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\ntype ElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nconst styles: Record<string, string> = {\n h1: 'text-6xl',\n h2: 'text-5xl',\n h3: 'text-4xl',\n h4: 'text-3xl',\n h5: 'text-2xl',\n h6: 'text-xl',\n};\n\nconst Title = ({ children, level = 1, className, ...props }: Props) => {\n const Element: ElementType = level < 1 || level > 6 ? 'h1' : `h${level}`;\n\n return (\n <Element\n className={cn('leading-snug font-bold', styles[Element], className)}\n {...props}\n >\n {children}\n </Element>\n );\n};\n\nexport default Title;\n"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"title.mjs","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<\n 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n> {\n level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\ntype ElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n// Scale up at wider breakpoints instead of a single fixed size — the desktop\n// size stays the same as before, but narrow/mobile viewports now get a\n// smaller starting size instead of always rendering at the full desktop size.\nconst styles: Record<string, string> = {\n h1: 'text-4xl sm:text-5xl lg:text-6xl',\n h2: 'text-3xl sm:text-4xl lg:text-5xl',\n h3: 'text-2xl sm:text-3xl lg:text-4xl',\n h4: 'text-xl sm:text-2xl lg:text-3xl',\n h5: 'text-lg sm:text-xl lg:text-2xl',\n h6: 'text-base sm:text-lg lg:text-xl',\n};\n\nconst Title = ({ children, level = 1, className, ...props }: Props) => {\n const Element: ElementType = level < 1 || level > 6 ? 'h1' : `h${level}`;\n\n return (\n <Element\n className={cn('leading-snug font-bold', styles[Element], className)}\n {...props}\n >\n {children}\n </Element>\n );\n};\n\nexport default Title;\n"],"mappings":";;;;AAaA,MAAM,SAAiC;CACrC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,SAAS,EAAE,UAAU,QAAQ,GAAG,WAAW,GAAG,YAAmB;CACrE,MAAM,UAAuB,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI;AAEjE,QACE,oBAAC;EACC,WAAW,GAAG,0BAA0B,OAAO,UAAU,UAAU;EACnE,GAAI;EAEH;GACO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapse.mjs","names":["accordion"],"sources":["../../../src/components/molecules/collapse.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { accordion } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Accordion, AccordionItem, AccordionTrigger, AccordionContent } =\n accordion;\n\ninterface Item {\n key: React.Key;\n label: React.ReactNode;\n disabled?: boolean;\n children: React.ReactNode;\n}\n\ninterface Props extends Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> {\n items?: Item[];\n accordion?: boolean;\n expandIcon?: React.ReactNode;\n classNames?: {\n item?: string;\n header?: string;\n body?: string;\n };\n defaultActiveKey?: string[] | number[];\n activeKey?: string[] | number[];\n onChange?: (keys: string[]) => void;\n}\n\nconst Collapse = ({\n expandIcon,\n accordion = false,\n items = [],\n className,\n classNames,\n defaultActiveKey,\n activeKey: _activeKey,\n onChange: _onChange,\n}: Props) => {\n const controlled = _activeKey !== undefined;\n\n const accordionProps = accordion\n ? controlled\n ? {\n type: 'single' as const,\n value: `${_activeKey?.[0] ?? ''}`,\n onValueChange: (value: string) => {\n _onChange?.(value ? [value] : []);\n },\n }\n : {\n type: 'single' as const,\n defaultValue: `${defaultActiveKey?.[0] ?? ''}`,\n }\n : controlled\n ? {\n type: 'multiple' as const,\n value: _activeKey?.map(key => `${key}`),\n onValueChange: (values: string[]) => {\n _onChange?.(values);\n },\n }\n : {\n type: 'multiple' as const,\n defaultValue: defaultActiveKey?.map(key => `${key}`),\n };\n\n return (\n <Accordion className={className} {...accordionProps}>\n {items.map(({ label, children, disabled }, key) => (\n <AccordionItem\n key={key}\n value={`${key}`}\n className={cn(\n 'border-none',\n classNames?.item,\n //\n )}\n disabled={disabled}\n >\n <AccordionTrigger\n className={cn(\n 'hover:no-underline',\n classNames?.header,\n disabled && 'cursor-no-drop opacity-50',\n //\n )}\n expandIcon={expandIcon}\n disabled={disabled}\n >\n {label}\n </AccordionTrigger>\n <AccordionContent\n className={cn(\n classNames?.body,\n //\n )}\n >\n {children}\n </AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n );\n};\n\nexport default Collapse;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"collapse.mjs","names":["accordion"],"sources":["../../../src/components/molecules/collapse.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { accordion } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Accordion, AccordionItem, AccordionTrigger, AccordionContent } =\n accordion;\n\ninterface Item {\n key: React.Key;\n label: React.ReactNode;\n disabled?: boolean;\n children: React.ReactNode;\n}\n\ninterface Props extends Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'onChange'\n> {\n items?: Item[];\n accordion?: boolean;\n expandIcon?: React.ReactNode;\n classNames?: {\n item?: string;\n header?: string;\n body?: string;\n };\n defaultActiveKey?: string[] | number[];\n activeKey?: string[] | number[];\n onChange?: (keys: string[]) => void;\n}\n\nconst Collapse = ({\n expandIcon,\n accordion = false,\n items = [],\n className,\n classNames,\n defaultActiveKey,\n activeKey: _activeKey,\n onChange: _onChange,\n}: Props) => {\n const controlled = _activeKey !== undefined;\n\n const accordionProps = accordion\n ? controlled\n ? {\n type: 'single' as const,\n value: `${_activeKey?.[0] ?? ''}`,\n onValueChange: (value: string) => {\n _onChange?.(value ? [value] : []);\n },\n }\n : {\n type: 'single' as const,\n defaultValue: `${defaultActiveKey?.[0] ?? ''}`,\n }\n : controlled\n ? {\n type: 'multiple' as const,\n value: _activeKey?.map(key => `${key}`),\n onValueChange: (values: string[]) => {\n _onChange?.(values);\n },\n }\n : {\n type: 'multiple' as const,\n defaultValue: defaultActiveKey?.map(key => `${key}`),\n };\n\n return (\n <Accordion className={className} {...accordionProps}>\n {items.map(({ label, children, disabled }, key) => (\n <AccordionItem\n key={key}\n value={`${key}`}\n className={cn(\n 'border-none',\n classNames?.item,\n //\n )}\n disabled={disabled}\n >\n <AccordionTrigger\n className={cn(\n 'hover:no-underline',\n classNames?.header,\n disabled && 'cursor-no-drop opacity-50',\n //\n )}\n expandIcon={expandIcon}\n disabled={disabled}\n >\n {label}\n </AccordionTrigger>\n <AccordionContent\n className={cn(\n classNames?.body,\n //\n )}\n >\n {children}\n </AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n );\n};\n\nexport default Collapse;\n"],"mappings":";;;;;;;;AAOA,MAAM,EAAE,WAAW,eAAe,kBAAkB,qBAClDA;AA0BF,MAAM,YAAY,EAChB,YACA,YAAY,OACZ,QAAQ,EAAE,EACV,WACA,YACA,kBACA,WAAW,YACX,UAAU,gBACC;CACX,MAAM,aAAa,eAAe;AA4BlC,QACE,oBAAC;EAAqB;EAAW,GA3BZ,YACnB,aACE;GACE,MAAM;GACN,OAAO,GAAG,aAAa,MAAM;GAC7B,gBAAgB,UAAkB;AAChC,gBAAY,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC;;GAEpC,GACD;GACE,MAAM;GACN,cAAc,GAAG,mBAAmB,MAAM;GAC3C,GACH,aACE;GACE,MAAM;GACN,OAAO,YAAY,KAAI,QAAO,GAAG,MAAM;GACvC,gBAAgB,WAAqB;AACnC,gBAAY,OAAO;;GAEtB,GACD;GACE,MAAM;GACN,cAAc,kBAAkB,KAAI,QAAO,GAAG,MAAM;GACrD;YAIF,MAAM,KAAK,EAAE,OAAO,UAAU,YAAY,QACzC,qBAAC;GAEC,OAAO,GAAG;GACV,WAAW,GACT,eACA,YAAY,KAEb;GACS;cAEV,oBAAC;IACC,WAAW,GACT,sBACA,YAAY,QACZ,YAAY,4BAEb;IACW;IACF;cAET;KACgB,EACnB,oBAAC;IACC,WAAW,GACT,YAAY,KAEb;IAEA;KACgB;KA5Bd,IA6BS,CAChB;GACQ"}
|