@shapesos/clay 0.4.1 → 0.5.1
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/chat.cjs +201 -85
- package/dist/chat.cjs.map +1 -1
- package/dist/chat.d.cts +6 -1
- package/dist/chat.d.ts +6 -1
- package/dist/chat.js +8 -4
- package/dist/chunk-DRBRT57F.js +1 -0
- package/dist/chunk-DRBRT57F.js.map +1 -0
- package/dist/chunk-JC2RQL5O.js +76 -0
- package/dist/chunk-JC2RQL5O.js.map +1 -0
- package/dist/{chunk-6HNZQ2BF.js → chunk-JF3P66JF.js} +2 -1
- package/dist/chunk-JF3P66JF.js.map +1 -0
- package/dist/chunk-K2Q5MQWJ.js +17 -0
- package/dist/chunk-K2Q5MQWJ.js.map +1 -0
- package/dist/chunk-MLCRDVQ2.js +89 -0
- package/dist/chunk-MLCRDVQ2.js.map +1 -0
- package/dist/chunk-OLJIJYB5.js +46 -0
- package/dist/chunk-OLJIJYB5.js.map +1 -0
- package/dist/chunk-SMTOVZ3O.js +19 -0
- package/dist/chunk-SMTOVZ3O.js.map +1 -0
- package/dist/{chunk-EPS4LOOW.js → chunk-SYMZU32H.js} +143 -63
- package/dist/chunk-SYMZU32H.js.map +1 -0
- package/dist/{chunk-A6DKIFWS.js → chunk-WQ2QTUYA.js} +9 -1
- package/dist/chunk-WQ2QTUYA.js.map +1 -0
- package/dist/chunk-WZHNMC6P.js +77 -0
- package/dist/chunk-WZHNMC6P.js.map +1 -0
- package/dist/icon.cjs +31 -16
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.d.cts +6 -2
- package/dist/icon.d.ts +6 -2
- package/dist/icon.js +5 -3
- package/dist/index.cjs +299 -103
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -20
- package/dist/index.d.ts +5 -20
- package/dist/index.js +32 -74
- package/dist/index.js.map +1 -1
- package/dist/keyboard-shortcut.cjs +238 -0
- package/dist/keyboard-shortcut.cjs.map +1 -0
- package/dist/keyboard-shortcut.d.cts +19 -0
- package/dist/keyboard-shortcut.d.ts +19 -0
- package/dist/keyboard-shortcut.js +14 -0
- package/dist/keyboard-shortcut.js.map +1 -0
- package/dist/text-area.cjs +497 -0
- package/dist/text-area.cjs.map +1 -0
- package/dist/text-area.d.cts +18 -0
- package/dist/text-area.d.ts +18 -0
- package/dist/text-area.js +11 -0
- package/dist/text-area.js.map +1 -0
- package/dist/tokens.cjs +9 -0
- package/dist/tokens.cjs.map +1 -1
- package/dist/tokens.d.cts +2 -0
- package/dist/tokens.d.ts +2 -0
- package/dist/tokens.js +2 -2
- package/dist/utils.cjs +60 -0
- package/dist/utils.cjs.map +1 -0
- package/dist/utils.d.cts +7 -0
- package/dist/utils.d.ts +7 -0
- package/dist/utils.js +13 -0
- package/dist/utils.js.map +1 -0
- package/package.json +17 -1
- package/dist/chunk-6HNZQ2BF.js.map +0 -1
- package/dist/chunk-A6DKIFWS.js.map +0 -1
- package/dist/chunk-AEXYOY5H.js +0 -115
- package/dist/chunk-AEXYOY5H.js.map +0 -1
- package/dist/chunk-EPS4LOOW.js.map +0 -1
package/dist/icon.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/icon/index.ts","../src/components/icon/icon.tsx","../src/components/icon/icon-styles.ts","../src/components/icon-button/icon-button.
|
|
1
|
+
{"version":3,"sources":["../src/components/icon/index.ts","../src/components/icon/icon.tsx","../src/components/icon/icon-styles.ts","../src/components/icon-button/icon-button-styles.ts","../src/tokens/colors.ts","../src/components/icon-button/icon-button.tsx"],"sourcesContent":["export { Icon } from \"./icon\";\nexport type { IconProps } from \"./types\";\nexport { IconButton } from \"../icon-button/icon-button\";\nexport type { IconButtonProps, IconButtonSize } from \"../icon-button/types\";\n","import { forwardRef } from \"react\";\n\nimport { IconWrapper, getStrokeWidth } from \"./icon-styles\";\nimport type { IconProps } from \"./types\";\n\nconst DEFAULT_SIZE = 16;\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n { icon: IconComponent, size = DEFAULT_SIZE, color, className, \"aria-label\": ariaLabel },\n ref\n) {\n return (\n <IconWrapper\n ref={ref}\n className={className}\n $color={color}\n aria-label={ariaLabel}\n role={ariaLabel ? \"img\" : undefined}\n >\n <IconComponent width={size} height={size} strokeWidth={getStrokeWidth(size)} />\n </IconWrapper>\n );\n});\n","import styled from \"styled-components\";\n\nexport const STROKE_WIDTH_BY_SIZE: Record<number, number> = {\n 12: 1.4,\n 14: 1.4,\n 16: 1.8,\n 18: 1.8,\n 20: 1.8,\n 24: 1.8,\n};\n\nexport const DEFAULT_STROKE_WIDTH = 1.8;\n\nexport function getStrokeWidth(size: number): number {\n return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;\n}\n\nexport const IconWrapper = styled.span<{ $color?: string }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: ${({ $color }) => $color ?? \"currentColor\"};\n flex-shrink: 0;\n`;\n","import styled from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport type { IconButtonSize, IconButtonVariant } from \"./types\";\n\nconst PADDING: Record<IconButtonVariant, Record<IconButtonSize, string>> = {\n short: {\n small: \"4px\",\n medium: \"6px\",\n },\n long: {\n small: \"4px 6px\",\n medium: \"6px 10px\",\n },\n};\n\nconst BORDER_RADIUS: Record<IconButtonSize, number> = {\n small: 6,\n medium: 10,\n};\n\nexport const Button = styled.button<{\n $size: IconButtonSize;\n $variant: IconButtonVariant;\n $isSelected: boolean;\n}>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: ${({ $size, $variant }) => PADDING[$variant][$size]};\n border: none;\n border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;\n background: ${({ $isSelected }) => ($isSelected ? colors[\"brown-40\"] : \"transparent\")};\n color: ${colors[\"brown-100\"]};\n cursor: pointer;\n transition: background-color 100ms ease;\n\n &:hover {\n background: ${({ $isSelected }) => ($isSelected ? colors[\"brown-40\"] : colors[\"brown-20\"])};\n }\n\n &:active {\n background: ${colors[\"brown-40\"]};\n }\n\n &:disabled {\n color: ${colors[\"brown-50\"]};\n background: transparent;\n cursor: not-allowed;\n }\n`;\n","export const colors = {\n // White\n white: \"#FFFFFF\",\n \"white-alpha-85\": \"rgba(255, 255, 255, 0.85)\",\n \"white-alpha-40\": \"rgba(255, 255, 255, 0.40)\",\n\n // Brown\n \"brown-10\": \"#FAF9F8\",\n \"brown-20\": \"#F5F3F0\",\n \"brown-30\": \"#EEEBE5\",\n \"brown-40\": \"#E6E2DA\",\n \"brown-50\": \"#CFCBC4\",\n \"brown-60\": \"#A19E99\",\n \"brown-70\": \"#73716D\",\n \"brown-80\": \"#5C5A57\",\n \"brown-90\": \"#2E2D2C\",\n \"brown-100\": \"#171716\",\n \"brown-alpha-12\": \"rgba(23, 23, 22, 0.12)\",\n \"brown-alpha-20\": \"rgba(23, 23, 22, 0.20)\",\n \"brown-alpha-55\": \"rgba(23, 23, 22, 0.55)\",\n \"brown-alpha-70\": \"rgba(23, 23, 22, 0.70)\",\n \"brown-alpha-80\": \"rgba(23, 23, 22, 0.80)\",\n \"brown-alpha-90\": \"rgba(23, 23, 22, 0.90)\",\n\n // Fuchsia\n \"fuchsia-50\": \"#FAF5FF\",\n \"fuchsia-300\": \"#F0ABFC\",\n \"fuchsia-500\": \"#D946EF\",\n \"fuchsia-600\": \"#C026D3\",\n \"fuchsia-800\": \"#86198F\",\n\n // Pink\n \"pink-50\": \"#FDF2F8\",\n \"pink-400\": \"#F472B6\",\n \"pink-600\": \"#DB2777\",\n \"pink-800\": \"#9D174D\",\n\n // Violet\n \"violet-50\": \"#F5F3FF\",\n \"violet-400\": \"#A78BFA\",\n \"violet-600\": \"#7C3AED\",\n \"violet-800\": \"#5B21B6\",\n\n // Indigo\n \"indigo-50\": \"#EEF2FF\",\n \"indigo-400\": \"#818CF8\",\n \"indigo-500\": \"#6366F1\",\n \"indigo-600\": \"#4F46E5\",\n \"indigo-800\": \"#3730A3\",\n\n // Cyan\n \"cyan-50\": \"#E7FEFF\",\n \"cyan-300\": \"#67E8F9\",\n \"cyan-600\": \"#0891B2\",\n \"cyan-900\": \"#164E63\",\n\n // Teal\n \"teal-50\": \"#EBFDF9\",\n \"teal-300\": \"#5EEAD4\",\n \"teal-600\": \"#0D9488\",\n\n // Rose\n \"rose-400\": \"#FB7185\",\n\n // Purple\n \"purple-400\": \"#C084FC\",\n\n // Blue\n \"blue-50\": \"#EFF6FF\",\n \"blue-100\": \"#DBEAFE\",\n \"blue-300\": \"#93C5FD\",\n \"blue-400\": \"#60A5FA\",\n \"blue-600\": \"#2563EB\",\n \"blue-800\": \"#1E40AF\",\n\n // Sky\n \"sky-300\": \"#7DD3FC\",\n\n // Green\n \"green-50\": \"#ECF9F0\",\n \"green-100\": \"#D4F1D9\",\n \"green-400\": \"#3DC269\",\n \"green-700\": \"#277C43\",\n \"green-800\": \"#1C5930\",\n\n // Orange\n \"orange-50\": \"#FFF7ED\",\n \"orange-100\": \"#FFEDD5\",\n \"orange-200\": \"#FED7AA\",\n \"orange-500\": \"#F97316\",\n \"orange-600\": \"#EA580C\",\n\n // Red\n \"red-50\": \"#FEF2F2\",\n \"red-100\": \"#FEE2E2\",\n \"red-200\": \"#FECACA\",\n \"red-400\": \"#F7776C\",\n \"red-500\": \"#EF4444\",\n \"red-600\": \"#DC2626\",\n} as const;\n\nexport type ColorToken = keyof typeof colors;\n","import { Icon } from \"../icon/icon\";\nimport { Button } from \"./icon-button-styles\";\nimport type { IconButtonProps, IconButtonSize } from \"./types\";\n\nconst ICON_SIZE_BY_BUTTON_SIZE: Record<IconButtonSize, number> = {\n small: 16,\n medium: 20,\n};\n\nexport function IconButton({\n icon,\n size = \"small\",\n variant = \"short\",\n isSelected = false,\n disabled = false,\n onClick,\n className,\n id,\n as,\n \"aria-label\": ariaLabel,\n}: IconButtonProps): React.ReactNode {\n return (\n <Button\n className={className}\n id={id}\n as={as}\n $size={size}\n $variant={variant}\n $isSelected={isSelected}\n disabled={disabled}\n onClick={disabled ? undefined : onClick}\n aria-label={ariaLabel}\n >\n <Icon icon={icon} size={ICON_SIZE_BY_BUTTON_SIZE[size]} />\n </Button>\n );\n}\n"],"mappings":"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","names":["styled","Icon","import_styled_components","styled","import_jsx_runtime"]}
|
package/dist/icon.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ComponentType, SVGProps } from 'react';
|
|
2
|
+
import { ComponentType, SVGProps, ElementType } from 'react';
|
|
3
3
|
|
|
4
4
|
interface IconProps {
|
|
5
5
|
icon: ComponentType<SVGProps<SVGSVGElement>>;
|
|
@@ -12,16 +12,20 @@ interface IconProps {
|
|
|
12
12
|
declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
|
|
13
13
|
|
|
14
14
|
type IconButtonSize = "small" | "medium";
|
|
15
|
+
type IconButtonVariant = "short" | "long";
|
|
15
16
|
interface IconButtonProps {
|
|
16
17
|
icon: ComponentType<SVGProps<SVGSVGElement>>;
|
|
17
18
|
size?: IconButtonSize;
|
|
19
|
+
variant?: IconButtonVariant;
|
|
18
20
|
isSelected?: boolean;
|
|
19
21
|
disabled?: boolean;
|
|
20
22
|
onClick?: () => void;
|
|
21
23
|
className?: string;
|
|
24
|
+
id?: string;
|
|
25
|
+
as?: ElementType;
|
|
22
26
|
"aria-label"?: string;
|
|
23
27
|
}
|
|
24
28
|
|
|
25
|
-
declare
|
|
29
|
+
declare function IconButton({ icon, size, variant, isSelected, disabled, onClick, className, id, as, "aria-label": ariaLabel, }: IconButtonProps): React.ReactNode;
|
|
26
30
|
|
|
27
31
|
export { Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconProps };
|
package/dist/icon.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ComponentType, SVGProps } from 'react';
|
|
2
|
+
import { ComponentType, SVGProps, ElementType } from 'react';
|
|
3
3
|
|
|
4
4
|
interface IconProps {
|
|
5
5
|
icon: ComponentType<SVGProps<SVGSVGElement>>;
|
|
@@ -12,16 +12,20 @@ interface IconProps {
|
|
|
12
12
|
declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
|
|
13
13
|
|
|
14
14
|
type IconButtonSize = "small" | "medium";
|
|
15
|
+
type IconButtonVariant = "short" | "long";
|
|
15
16
|
interface IconButtonProps {
|
|
16
17
|
icon: ComponentType<SVGProps<SVGSVGElement>>;
|
|
17
18
|
size?: IconButtonSize;
|
|
19
|
+
variant?: IconButtonVariant;
|
|
18
20
|
isSelected?: boolean;
|
|
19
21
|
disabled?: boolean;
|
|
20
22
|
onClick?: () => void;
|
|
21
23
|
className?: string;
|
|
24
|
+
id?: string;
|
|
25
|
+
as?: ElementType;
|
|
22
26
|
"aria-label"?: string;
|
|
23
27
|
}
|
|
24
28
|
|
|
25
|
-
declare
|
|
29
|
+
declare function IconButton({ icon, size, variant, isSelected, disabled, onClick, className, id, as, "aria-label": ariaLabel, }: IconButtonProps): React.ReactNode;
|
|
26
30
|
|
|
27
31
|
export { Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconProps };
|
package/dist/icon.js
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import "./chunk-72TJUKMV.js";
|
|
2
2
|
import {
|
|
3
|
-
Icon,
|
|
4
3
|
IconButton
|
|
5
|
-
} from "./chunk-
|
|
6
|
-
import
|
|
4
|
+
} from "./chunk-MLCRDVQ2.js";
|
|
5
|
+
import {
|
|
6
|
+
Icon
|
|
7
|
+
} from "./chunk-OLJIJYB5.js";
|
|
8
|
+
import "./chunk-JF3P66JF.js";
|
|
7
9
|
import "./chunk-5WRI5ZAA.js";
|
|
8
10
|
export {
|
|
9
11
|
Icon,
|