@shapesos/clay 0.1.0

package/dist/chunk-P7NISN4V.js

@@ -0,0 +1,115 @@
+import {
+  colors
+} from "./chunk-6HNZQ2BF.js";
+
+// src/icon/icon.tsx
+import { forwardRef } from "react";
+
+// src/icon/icon-styles.ts
+import styled from "styled-components";
+var STROKE_WIDTH_BY_SIZE = {
+  12: 1.2,
+  14: 1.2,
+  16: 1.8,
+  18: 1.8,
+  20: 1.8,
+  24: 1.8
+};
+var DEFAULT_STROKE_WIDTH = 1.8;
+function getStrokeWidth(size) {
+  return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;
+}
+var IconWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ $color }) => $color ?? "currentColor"};
+  flex-shrink: 0;
+`;
+
+// src/icon/icon.tsx
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_SIZE = 16;
+var Icon = forwardRef(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
+  return /* @__PURE__ */ jsx(
+    IconWrapper,
+    {
+      ref,
+      className,
+      $color: color,
+      "aria-label": ariaLabel,
+      role: ariaLabel ? "img" : void 0,
+      children: /* @__PURE__ */ jsx(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
+    }
+  );
+});
+
+// src/icon-button/icon-button.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/icon-button/icon-button-styles.ts
+import styled2 from "styled-components";
+var DIMENSIONS = {
+  small: 28,
+  medium: 32
+};
+var BORDER_RADIUS = {
+  small: 6,
+  medium: 10
+};
+var Button = styled2.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ $size }) => DIMENSIONS[$size]}px;
+  height: ${({ $size }) => DIMENSIONS[$size]}px;
+  padding: 0;
+  border: none;
+  border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;
+  background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : "transparent"};
+  color: ${colors["brown-100"]};
+  cursor: pointer;
+  transition: background-color 100ms ease;
+
+  &:hover {
+    background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : colors["brown-20"]};
+  }
+
+  &:active {
+    background: ${colors["brown-40"]};
+  }
+
+  &:disabled {
+    color: ${colors["brown-50"]};
+    background: transparent;
+    cursor: not-allowed;
+  }
+`;
+
+// src/icon-button/icon-button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ICON_SIZE_BY_BUTTON_SIZE = {
+  small: 14,
+  medium: 16
+};
+var IconButton = forwardRef2(function IconButton2({ icon, size = "small", isSelected = false, disabled = false, onClick, className, "aria-label": ariaLabel }, ref) {
+  return /* @__PURE__ */ jsx2(
+    Button,
+    {
+      ref,
+      className,
+      $size: size,
+      $isSelected: isSelected,
+      disabled,
+      onClick: disabled ? void 0 : onClick,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx2(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
+    }
+  );
+});
+
+export {
+  Icon,
+  IconButton
+};
+//# sourceMappingURL=chunk-P7NISN4V.js.map

package/dist/chunk-P7NISN4V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon/icon.tsx","../src/icon/icon-styles.ts","../src/icon-button/icon-button.tsx","../src/icon-button/icon-button-styles.ts"],"sourcesContent":["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.2,\n  14: 1.2,\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 { forwardRef } from \"react\";\n\nimport { 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: 14,\n  medium: 16,\n};\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { icon, size = \"small\", isSelected = false, disabled = false, onClick, className, \"aria-label\": ariaLabel },\n  ref\n) {\n  return (\n    <Button\n      ref={ref}\n      className={className}\n      $size={size}\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","import styled from \"styled-components\";\n\nimport { colors } from \"../tokens/colors\";\nimport type { IconButtonSize } from \"./types\";\n\nconst DIMENSIONS: Record<IconButtonSize, number> = {\n  small: 28,\n  medium: 32,\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  $isSelected: boolean;\n}>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ${({ $size }) => DIMENSIONS[$size]}px;\n  height: ${({ $size }) => DIMENSIONS[$size]}px;\n  padding: 0;\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"],"mappings":";;;;;AAAA,SAAS,kBAAkB;;;ACA3B,OAAO,YAAY;AAEZ,IAAM,uBAA+C;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,uBAAuB;AAE7B,SAAS,eAAe,MAAsB;AACnD,SAAO,qBAAqB,IAAI,KAAK;AACvC;AAEO,IAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA,WAIvB,CAAC,EAAE,OAAO,MAAM,UAAU,cAAc;AAAA;AAAA;;;ADF7C;AAdN,IAAM,eAAe;AAEd,IAAM,OAAO,WAAuC,SAASA,MAClE,EAAE,MAAM,eAAe,OAAO,cAAc,OAAO,WAAW,cAAc,UAAU,GACtF,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAY;AAAA,MACZ,MAAM,YAAY,QAAQ;AAAA,MAE1B,8BAAC,iBAAc,OAAO,MAAM,QAAQ,MAAM,aAAa,eAAe,IAAI,GAAG;AAAA;AAAA,EAC/E;AAEJ,CAAC;;;AEtBD,SAAS,cAAAC,mBAAkB;;;ACA3B,OAAOC,aAAY;AAKnB,IAAM,aAA6C;AAAA,EACjD,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,IAAM,gBAAgD;AAAA,EACpD,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,IAAM,SAASC,QAAO;AAAA;AAAA;AAAA;AAAA,WAOlB,CAAC,EAAE,MAAM,MAAM,WAAW,KAAK,CAAC;AAAA,YAC/B,CAAC,EAAE,MAAM,MAAM,WAAW,KAAK,CAAC;AAAA;AAAA;AAAA,mBAGzB,CAAC,EAAE,MAAM,MAAM,cAAc,KAAK,CAAC;AAAA,gBACtC,CAAC,EAAE,YAAY,MAAO,cAAc,OAAO,UAAU,IAAI,aAAc;AAAA,WAC5E,OAAO,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKZ,CAAC,EAAE,YAAY,MAAO,cAAc,OAAO,UAAU,IAAI,OAAO,UAAU,CAAE;AAAA;AAAA;AAAA;AAAA,kBAI5E,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,aAIvB,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;;;ADhBzB,gBAAAC,YAAA;AAnBN,IAAM,2BAA2D;AAAA,EAC/D,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,IAAM,aAAaC,YAA+C,SAASC,YAChF,EAAE,MAAM,OAAO,SAAS,aAAa,OAAO,WAAW,OAAO,SAAS,WAAW,cAAc,UAAU,GAC1G,KACA;AACA,SACE,gBAAAF;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,aAAa;AAAA,MACb;AAAA,MACA,SAAS,WAAW,SAAY;AAAA,MAChC,cAAY;AAAA,MAEZ,0BAAAA,KAAC,QAAK,MAAY,MAAM,yBAAyB,IAAI,GAAG;AAAA;AAAA,EAC1D;AAEJ,CAAC;","names":["Icon","forwardRef","styled","styled","jsx","forwardRef","IconButton"]}