@hyunsdev/ui 0.1.0

package/dist/components/color-dot.js

@@ -0,0 +1,41 @@
+import {
+  cn
+} from "../chunk-DN2AEEA2.js";
+
+// src/components/color-dot.tsx
+import "react";
+import { jsx } from "react/jsx-runtime";
+var colorDotColors = {
+  accent: "text-text-accent",
+  "on-accent": "text-text-on-accent",
+  normal: "text-text-normal",
+  muted: "text-text-muted",
+  faint: "text-text-faint",
+  info: "text-text-info",
+  success: "text-text-success",
+  warning: "text-text-warning",
+  error: "text-text-error"
+};
+function ColorDot({
+  className,
+  color = "normal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "color-dot",
+      "data-color": color,
+      className: cn(
+        "inline-block size-2.5 shrink-0 rounded-full bg-current",
+        colorDotColors[color],
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  ColorDot
+};
+//# sourceMappingURL=color-dot.js.map

package/dist/components/color-dot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/color-dot.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@hyunsdev/ui/lib/utils\"\n\nconst colorDotColors = {\n  accent: \"text-text-accent\",\n  \"on-accent\": \"text-text-on-accent\",\n  normal: \"text-text-normal\",\n  muted: \"text-text-muted\",\n  faint: \"text-text-faint\",\n  info: \"text-text-info\",\n  success: \"text-text-success\",\n  warning: \"text-text-warning\",\n  error: \"text-text-error\",\n} as const\n\ntype ColorDotColor = keyof typeof colorDotColors\n\nfunction ColorDot({\n  className,\n  color = \"normal\",\n  ...props\n}: React.ComponentProps<\"span\"> & { color?: ColorDotColor }) {\n  return (\n    <span\n      data-slot=\"color-dot\"\n      data-color={color}\n      className={cn(\n        \"inline-block size-2.5 shrink-0 rounded-full bg-current\",\n        colorDotColors[color],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { ColorDot, type ColorDotColor }\n"],"mappings":";;;;;AAAA,OAAuB;AAwBnB;AApBJ,IAAM,iBAAiB;AAAA,EACrB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAIA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAA6D;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,eAAe,KAAK;AAAA,QACpB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/color-picker.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { F as FieldControlSize } from '../_styles-BbTx89aX.js';
+
+type ColorPickerProps = Omit<React.ComponentProps<"input">, "defaultValue" | "onChange" | "size" | "type" | "value"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    size?: FieldControlSize;
+};
+declare function ColorPicker({ className, value, defaultValue, onValueChange, onBlur, disabled, id, readOnly, size, ...props }: ColorPickerProps): React.JSX.Element;
+
+export { ColorPicker, type ColorPickerProps };

package/dist/components/color-picker.js

@@ -0,0 +1,142 @@
+"use client";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput
+} from "../chunk-UVAI2U6X.js";
+import "../chunk-NE3IVPMO.js";
+import "../chunk-YUPLJP3F.js";
+import "../chunk-TU5CYBB4.js";
+import "../chunk-O2BG2KSY.js";
+import {
+  cn
+} from "../chunk-DN2AEEA2.js";
+
+// src/components/color-picker.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_COLOR_PICKER_VALUE = "#000000";
+var HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;
+function normalizeHexColor(value) {
+  if (!value) {
+    return void 0;
+  }
+  const trimmedValue = value.trim();
+  if (!HEX_COLOR_PATTERN.test(trimmedValue)) {
+    return void 0;
+  }
+  return trimmedValue.toLowerCase();
+}
+function ColorPicker({
+  className,
+  value,
+  defaultValue,
+  onValueChange,
+  onBlur,
+  disabled,
+  id,
+  readOnly,
+  size = "default",
+  ...props
+}) {
+  const inputId = React.useId();
+  const colorInputId = React.useId();
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React.useState(
+    normalizeHexColor(defaultValue) ?? DEFAULT_COLOR_PICKER_VALUE
+  );
+  const committedValue = normalizeHexColor(isControlled ? value : internalValue) ?? DEFAULT_COLOR_PICKER_VALUE;
+  const [draftValue, setDraftValue] = React.useState(committedValue);
+  React.useEffect(() => {
+    setDraftValue(committedValue);
+  }, [committedValue]);
+  function updateValue(nextValue) {
+    if (readOnly) {
+      return;
+    }
+    const normalizedValue = normalizeHexColor(nextValue);
+    if (!normalizedValue) {
+      return;
+    }
+    setDraftValue(normalizedValue);
+    if (!isControlled) {
+      setInternalValue(normalizedValue);
+    }
+    if (normalizedValue !== committedValue) {
+      onValueChange?.(normalizedValue);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      "data-slot": "color-picker",
+      "data-disabled": disabled || void 0,
+      size,
+      className,
+      children: [
+        /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", className: "cursor-pointer pl-1.5", children: /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-slot": "color-picker-swatch",
+            className: cn(
+              "border-border has-[:focus-visible]:ring-focus-ring relative block size-5 overflow-hidden rounded-[min(var(--radius-sm),6px)] border bg-[linear-gradient(45deg,var(--color-background-secondary)_25%,transparent_25%),linear-gradient(-45deg,var(--color-background-secondary)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,var(--color-background-secondary)_75%),linear-gradient(-45deg,transparent_75%,var(--color-background-secondary)_75%)] bg-[length:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0] group-data-[size=sm]/input-group:size-4.5 has-[:focus-visible]:ring-3",
+              disabled && "opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute inset-0",
+                  style: { backgroundColor: committedValue }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: `${id ?? colorInputId}-native`,
+                  type: "color",
+                  value: committedValue,
+                  disabled: disabled || readOnly,
+                  "aria-label": "Select color",
+                  className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+                  onChange: (event) => updateValue(event.target.value)
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          InputGroupInput,
+          {
+            ...props,
+            id: id ?? inputId,
+            type: "text",
+            value: draftValue,
+            disabled,
+            readOnly,
+            spellCheck: false,
+            autoCapitalize: "none",
+            autoComplete: "off",
+            inputMode: "text",
+            pattern: "#[0-9a-fA-F]{6}",
+            onChange: (event) => {
+              const nextValue = event.target.value;
+              setDraftValue(nextValue);
+              updateValue(nextValue);
+            },
+            onBlur: (event) => {
+              setDraftValue(committedValue);
+              onBlur?.(event);
+            },
+            className: "font-mono uppercase placeholder:normal-case"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ColorPicker
+};
+//# sourceMappingURL=color-picker.js.map

package/dist/components/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/color-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@hyunsdev/ui/components/input-group\"\nimport { cn } from \"@hyunsdev/ui/lib/utils\"\n\nimport type { FieldControlSize } from \"./_styles\"\n\nconst DEFAULT_COLOR_PICKER_VALUE = \"#000000\"\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/\n\ntype ColorPickerProps = Omit<\n  React.ComponentProps<\"input\">,\n  \"defaultValue\" | \"onChange\" | \"size\" | \"type\" | \"value\"\n> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  size?: FieldControlSize\n}\n\nfunction normalizeHexColor(value: string | undefined) {\n  if (!value) {\n    return undefined\n  }\n\n  const trimmedValue = value.trim()\n\n  if (!HEX_COLOR_PATTERN.test(trimmedValue)) {\n    return undefined\n  }\n\n  return trimmedValue.toLowerCase()\n}\n\nfunction ColorPicker({\n  className,\n  value,\n  defaultValue,\n  onValueChange,\n  onBlur,\n  disabled,\n  id,\n  readOnly,\n  size = \"default\",\n  ...props\n}: ColorPickerProps) {\n  const inputId = React.useId()\n  const colorInputId = React.useId()\n  const isControlled = value !== undefined\n  const [internalValue, setInternalValue] = React.useState(\n    normalizeHexColor(defaultValue) ?? DEFAULT_COLOR_PICKER_VALUE,\n  )\n  const committedValue =\n    normalizeHexColor(isControlled ? value : internalValue) ?? DEFAULT_COLOR_PICKER_VALUE\n  const [draftValue, setDraftValue] = React.useState(committedValue)\n\n  React.useEffect(() => {\n    setDraftValue(committedValue)\n  }, [committedValue])\n\n  function updateValue(nextValue: string) {\n    if (readOnly) {\n      return\n    }\n\n    const normalizedValue = normalizeHexColor(nextValue)\n\n    if (!normalizedValue) {\n      return\n    }\n\n    setDraftValue(normalizedValue)\n\n    if (!isControlled) {\n      setInternalValue(normalizedValue)\n    }\n\n    if (normalizedValue !== committedValue) {\n      onValueChange?.(normalizedValue)\n    }\n  }\n\n  return (\n    <InputGroup\n      data-slot=\"color-picker\"\n      data-disabled={disabled || undefined}\n      size={size}\n      className={className}\n    >\n      <InputGroupAddon align=\"inline-start\" className=\"cursor-pointer pl-1.5\">\n        <span\n          data-slot=\"color-picker-swatch\"\n          className={cn(\n            \"border-border has-[:focus-visible]:ring-focus-ring relative block size-5 overflow-hidden rounded-[min(var(--radius-sm),6px)] border bg-[linear-gradient(45deg,var(--color-background-secondary)_25%,transparent_25%),linear-gradient(-45deg,var(--color-background-secondary)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,var(--color-background-secondary)_75%),linear-gradient(-45deg,transparent_75%,var(--color-background-secondary)_75%)] bg-[length:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0] group-data-[size=sm]/input-group:size-4.5 has-[:focus-visible]:ring-3\",\n            disabled && \"opacity-50\",\n          )}\n        >\n          <span\n            aria-hidden=\"true\"\n            className=\"absolute inset-0\"\n            style={{ backgroundColor: committedValue }}\n          />\n          <input\n            id={`${id ?? colorInputId}-native`}\n            type=\"color\"\n            value={committedValue}\n            disabled={disabled || readOnly}\n            aria-label=\"Select color\"\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n            onChange={(event) => updateValue(event.target.value)}\n          />\n        </span>\n      </InputGroupAddon>\n      <InputGroupInput\n        {...props}\n        id={id ?? inputId}\n        type=\"text\"\n        value={draftValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        spellCheck={false}\n        autoCapitalize=\"none\"\n        autoComplete=\"off\"\n        inputMode=\"text\"\n        pattern=\"#[0-9a-fA-F]{6}\"\n        onChange={(event) => {\n          const nextValue = event.target.value\n\n          setDraftValue(nextValue)\n          updateValue(nextValue)\n        }}\n        onBlur={(event) => {\n          setDraftValue(committedValue)\n          onBlur?.(event)\n        }}\n        className=\"font-mono uppercase placeholder:normal-case\"\n      />\n    </InputGroup>\n  )\n}\n\nexport { ColorPicker, type ColorPickerProps }\n"],"mappings":";;;;;;;;;;;;;;;AAEA,YAAY,WAAW;AA0Ff,SAOE,KAPF;AAnFR,IAAM,6BAA6B;AACnC,IAAM,oBAAoB;AAY1B,SAAS,kBAAkB,OAA2B;AACpD,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,MAAM,KAAK;AAEhC,MAAI,CAAC,kBAAkB,KAAK,YAAY,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,SAAO,aAAa,YAAY;AAClC;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAqB;AACnB,QAAM,UAAgB,YAAM;AAC5B,QAAM,eAAqB,YAAM;AACjC,QAAM,eAAe,UAAU;AAC/B,QAAM,CAAC,eAAe,gBAAgB,IAAU;AAAA,IAC9C,kBAAkB,YAAY,KAAK;AAAA,EACrC;AACA,QAAM,iBACJ,kBAAkB,eAAe,QAAQ,aAAa,KAAK;AAC7D,QAAM,CAAC,YAAY,aAAa,IAAU,eAAS,cAAc;AAEjE,EAAM,gBAAU,MAAM;AACpB,kBAAc,cAAc;AAAA,EAC9B,GAAG,CAAC,cAAc,CAAC;AAEnB,WAAS,YAAY,WAAmB;AACtC,QAAI,UAAU;AACZ;AAAA,IACF;AAEA,UAAM,kBAAkB,kBAAkB,SAAS;AAEnD,QAAI,CAAC,iBAAiB;AACpB;AAAA,IACF;AAEA,kBAAc,eAAe;AAE7B,QAAI,CAAC,cAAc;AACjB,uBAAiB,eAAe;AAAA,IAClC;AAEA,QAAI,oBAAoB,gBAAgB;AACtC,sBAAgB,eAAe;AAAA,IACjC;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe,YAAY;AAAA,MAC3B;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,mBAAgB,OAAM,gBAAe,WAAU,yBAC9C;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA,cACT;AAAA,cACA,YAAY;AAAA,YACd;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,WAAU;AAAA,kBACV,OAAO,EAAE,iBAAiB,eAAe;AAAA;AAAA,cAC3C;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAI,GAAG,MAAM,YAAY;AAAA,kBACzB,MAAK;AAAA,kBACL,OAAO;AAAA,kBACP,UAAU,YAAY;AAAA,kBACtB,cAAW;AAAA,kBACX,WAAU;AAAA,kBACV,UAAU,CAAC,UAAU,YAAY,MAAM,OAAO,KAAK;AAAA;AAAA,cACrD;AAAA;AAAA;AAAA,QACF,GACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,IAAI,MAAM;AAAA,YACV,MAAK;AAAA,YACL,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA,YAAY;AAAA,YACZ,gBAAe;AAAA,YACf,cAAa;AAAA,YACb,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,UAAU,CAAC,UAAU;AACnB,oBAAM,YAAY,MAAM,OAAO;AAE/B,4BAAc,SAAS;AACvB,0BAAY,SAAS;AAAA,YACvB;AAAA,YACA,QAAQ,CAAC,UAAU;AACjB,4BAAc,cAAc;AAC5B,uBAAS,KAAK;AAAA,YAChB;AAAA,YACA,WAAU;AAAA;AAAA,QACZ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/combobox.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Command } from 'cmdk';
+import { Badge } from './badge.js';
+import { CommandGroup, CommandItem, CommandList } from './command.js';
+import { PopoverContent } from './popover.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import './dialog.js';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-popover';
+
+type ComboboxOption = {
+    value: string;
+    label: string;
+    keywords?: readonly string[];
+    disabled?: boolean;
+    group?: string | undefined;
+};
+type ComboboxSharedProps = {
+    options: readonly ComboboxOption[];
+    query?: string | undefined;
+    defaultQuery?: string | undefined;
+    onQueryChange?: (query: string) => void;
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: (open: boolean) => void;
+    creatable?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    placeholder?: string;
+    emptyMessage?: React.ReactNode;
+    loadingMessage?: React.ReactNode;
+    createLabel?: (query: string) => React.ReactNode;
+    onCreateOption?: (query: string) => void;
+    id?: string;
+    className?: string;
+    children?: React.ReactNode;
+};
+type SingleComboboxProps = ComboboxSharedProps & {
+    multiple?: false;
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onValueChange?: (value: string | undefined) => void;
+};
+type MultiComboboxProps = ComboboxSharedProps & {
+    multiple: true;
+    value?: string[] | undefined;
+    defaultValue?: string[] | undefined;
+    onValueChange?: (value: string[]) => void;
+};
+type ComboboxProps = SingleComboboxProps | MultiComboboxProps;
+declare function Combobox(props: ComboboxProps & Omit<React.ComponentProps<"div">, keyof ComboboxProps>): React.JSX.Element;
+declare function ComboboxTrigger({ className, children, leadingIcon, ...props }: React.ComponentProps<"div"> & {
+    leadingIcon?: React.ReactNode;
+}): React.JSX.Element;
+declare function ComboboxInput({ className, onFocus, onKeyDown, ...props }: Omit<React.ComponentProps<typeof Command.Input>, "value" | "onValueChange" | "disabled" | "placeholder">): React.JSX.Element;
+declare function ComboboxContent({ className, style, children, onOpenAutoFocus, ...props }: React.ComponentProps<typeof PopoverContent>): React.JSX.Element;
+declare function ComboboxList({ className, children, ...props }: React.ComponentProps<typeof CommandList>): React.JSX.Element;
+declare function ComboboxGroup({ className, children, ...props }: React.ComponentProps<typeof CommandGroup>): React.JSX.Element;
+declare function ComboboxItem({ option, className, children, ...props }: Omit<React.ComponentProps<typeof CommandItem>, "value" | "onSelect"> & {
+    option: ComboboxOption;
+}): React.JSX.Element;
+declare function ComboboxEmpty({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ComboboxLoading({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ComboboxTags({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
+declare function ComboboxTag({ option, className, children, ...props }: React.ComponentProps<typeof Badge> & {
+    option: ComboboxOption;
+}): React.JSX.Element;
+declare function ComboboxClear({ className, children, ...props }: Omit<React.ComponentProps<"button">, "children"> & {
+    children?: React.ReactNode;
+}): React.JSX.Element | null;
+
+export { Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxLoading, type ComboboxOption, type ComboboxProps, ComboboxTag, ComboboxTags, ComboboxTrigger };