@duskmoon-dev/components 0.1.2

package/dist/components/row/index.js

@@ -0,0 +1,109 @@
+"use client";
+
+// src/components/row/Row.tsx
+import { forwardRef } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/row.ts
+var rowBaseClass = "row";
+var rowNoWrapClass = "row-nowrap";
+var rowAlignClasses = {
+  top: "row-align-top",
+  middle: "row-align-middle",
+  bottom: "row-align-bottom",
+  stretch: "row-align-stretch"
+};
+var rowJustifyClasses = {
+  start: "row-justify-start",
+  end: "row-justify-end",
+  center: "row-justify-center",
+  "space-around": "row-justify-space-around",
+  "space-between": "row-justify-space-between",
+  "space-evenly": "row-justify-space-evenly"
+};
+function getRowClasses({
+  align,
+  justify,
+  wrap = true,
+  className
+}) {
+  return cn(rowBaseClass, align && rowAlignClasses[align], justify && rowJustifyClasses[justify], !wrap && rowNoWrapClass, className);
+}
+
+// src/components/row/Row.tsx
+import { jsx } from "react/jsx-runtime";
+var alignStyleMap = {
+  top: "flex-start",
+  middle: "center",
+  bottom: "flex-end",
+  stretch: "stretch"
+};
+var justifyStyleMap = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  "space-around": "space-around",
+  "space-between": "space-between",
+  "space-evenly": "space-evenly"
+};
+function resolveGutter(gutter) {
+  if (Array.isArray(gutter)) {
+    return gutter;
+  }
+  return [gutter ?? 0, 0];
+}
+var Row = forwardRef(({
+  align,
+  justify,
+  gutter,
+  wrap = true,
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const [horizontalGutter, verticalGutter] = resolveGutter(gutter);
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    className: getRowClasses({ align, justify, wrap, className }),
+    style: {
+      display: "flex",
+      flexFlow: wrap ? "row wrap" : "row nowrap",
+      alignItems: align ? alignStyleMap[align] : undefined,
+      justifyContent: justify ? justifyStyleMap[justify] : undefined,
+      columnGap: horizontalGutter,
+      rowGap: verticalGutter,
+      ...style
+    },
+    children
+  });
+});
+Row.displayName = "Row";
+export {
+  Row
+};

package/dist/components/segmented/Segmented.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { SegmentedProps } from "./Segmented.types";
+export declare const Segmented: React.ForwardRefExoticComponent<Omit<SegmentedProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/segmented/Segmented.types.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactNode } from "react";
+export type SegmentedValue = string | number;
+export type SegmentedSize = "sm" | "md" | "lg";
+export interface SegmentedOptionObject {
+    label: ReactNode;
+    value: SegmentedValue;
+    icon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export type SegmentedOption = SegmentedValue | SegmentedOptionObject;
+export interface SegmentedProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> {
+    options: SegmentedOption[];
+    value?: SegmentedValue;
+    defaultValue?: SegmentedValue;
+    onChange?: (value: SegmentedValue) => void;
+    disabled?: boolean;
+    block?: boolean;
+    size?: SegmentedSize;
+}

package/dist/components/segmented/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Segmented";
+export * from "./Segmented.types";

package/dist/components/segmented/index.js

@@ -0,0 +1,130 @@
+"use client";
+
+// src/components/segmented/Segmented.tsx
+import { forwardRef, useState } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/segmented.ts
+var segmentedBaseClass = "toggle-group";
+var segmentedStyleClass = "toggle-segmented";
+var segmentedFullClass = "toggle-group-full";
+var segmentedItemBaseClass = "toggle-btn";
+var segmentedItemActiveClass = "toggle-btn-active";
+var segmentedItemDisabledClass = "toggle-btn-disabled";
+var segmentedIconClass = "toggle-icon";
+var segmentedSizeClasses = {
+  sm: "toggle-btn-sm",
+  md: "",
+  lg: "toggle-btn-lg"
+};
+function getSegmentedClasses({
+  block,
+  className
+}) {
+  return cn(segmentedBaseClass, segmentedStyleClass, block && segmentedFullClass, className);
+}
+function getSegmentedItemClasses({
+  size = "md",
+  active,
+  disabled,
+  className
+}) {
+  return cn(segmentedItemBaseClass, segmentedSizeClasses[size], active && segmentedItemActiveClass, disabled && segmentedItemDisabledClass, className);
+}
+
+// src/components/segmented/Segmented.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function normalizeOption(option) {
+  if (typeof option === "object" && option !== null && "value" in option) {
+    return option;
+  }
+  return {
+    label: option,
+    value: option
+  };
+}
+var Segmented = forwardRef(({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  block,
+  size = "md",
+  className,
+  ...props
+}, ref) => {
+  const normalizedOptions = options.map(normalizeOption);
+  const initialValue = defaultValue ?? normalizedOptions.find((option) => !option.disabled)?.value;
+  const [internalValue, setInternalValue] = useState(initialValue);
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : internalValue;
+  function selectOption(option) {
+    if (disabled || option.disabled || option.value === currentValue) {
+      return;
+    }
+    if (!isControlled) {
+      setInternalValue(option.value);
+    }
+    onChange?.(option.value);
+  }
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    role: "radiogroup",
+    "aria-disabled": disabled || undefined,
+    className: getSegmentedClasses({ block, className }),
+    children: normalizedOptions.map((option) => {
+      const active = option.value === currentValue;
+      const itemDisabled = disabled || option.disabled;
+      return /* @__PURE__ */ jsxs("button", {
+        type: "button",
+        role: "radio",
+        "aria-checked": active,
+        disabled: itemDisabled,
+        className: getSegmentedItemClasses({
+          size,
+          active,
+          disabled: itemDisabled,
+          className: option.className
+        }),
+        onClick: () => selectOption(option),
+        children: [
+          option.icon ? /* @__PURE__ */ jsx("span", {
+            className: segmentedIconClass,
+            children: option.icon
+          }) : null,
+          option.label
+        ]
+      }, String(option.value));
+    })
+  });
+});
+Segmented.displayName = "Segmented";
+export {
+  Segmented
+};

package/dist/components/select/Select.d.ts

@@ -0,0 +1,2 @@
+import type { SelectComponent } from "./Select.types";
+export declare const Select: SelectComponent;

package/dist/components/select/Select.types.d.ts

@@ -0,0 +1,47 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type SelectValue = string | number;
+export type SelectMode = "multiple" | "tags";
+export type SelectSize = "sm" | "md" | "lg";
+export type SelectStatus = "error" | "success";
+export interface SelectOptionType {
+    label?: ReactNode;
+    value: SelectValue;
+    disabled?: boolean;
+    className?: string;
+}
+export interface SelectOptGroupType {
+    label?: ReactNode;
+    options: SelectOptionType[];
+    className?: string;
+}
+export type SelectOptionInput = SelectOptionType | SelectOptGroupType;
+export type SelectChangeValue = SelectValue | SelectValue[] | undefined;
+export interface SelectProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> {
+    allowClear?: boolean;
+    children?: ReactNode;
+    defaultValue?: SelectChangeValue;
+    disabled?: boolean;
+    filterOption?: boolean | ((inputValue: string, option: SelectOptionType) => boolean);
+    loading?: boolean;
+    mode?: SelectMode;
+    onChange?: (value: SelectChangeValue, option?: SelectOptionType | SelectOptionType[]) => void;
+    options?: SelectOptionInput[];
+    placeholder?: ReactNode;
+    showSearch?: boolean;
+    size?: SelectSize;
+    status?: SelectStatus;
+    value?: SelectChangeValue;
+}
+export interface SelectOptionProps extends Omit<ComponentProps<"div">, "children"> {
+    children?: ReactNode;
+    disabled?: boolean;
+    value: SelectValue;
+}
+export interface SelectOptGroupProps extends Omit<ComponentProps<"div">, "children"> {
+    children?: ReactNode;
+    label?: ReactNode;
+}
+export type SelectComponent = ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLDivElement>> & {
+    Option: ForwardRefExoticComponent<SelectOptionProps & RefAttributes<HTMLDivElement>>;
+    OptGroup: ForwardRefExoticComponent<SelectOptGroupProps & RefAttributes<HTMLDivElement>>;
+};

package/dist/components/select/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Select";
+export * from "./Select.types";

package/dist/components/select/index.js

@@ -0,0 +1,361 @@
+"use client";
+
+// src/components/select/Select.tsx
+import React, { forwardRef, useMemo, useState } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/select.ts
+var selectContainerClass = "select-container";
+var selectBaseClass = "select";
+var selectIconClass = "select-icon";
+var selectOpenClass = "select-open";
+var selectLoadingClass = "select-loading";
+var selectFullClass = "select-full";
+var selectOptionClass = "select-option";
+var selectOptionSelectedClass = "select-option-selected";
+var selectOptionDisabledClass = "select-option-disabled";
+var selectDropdownClass = "select-dropdown";
+var selectSearchClass = "select-search";
+var selectSelectionClass = "select-selection";
+var selectTagClass = "select-tag";
+var selectClearClass = "select-clear";
+var selectPlaceholderClass = "select-placeholder";
+var selectEmptyClass = "select-empty";
+var selectGroupClass = "select-group";
+var selectGroupLabelClass = "select-group-label";
+var selectSizeClasses = {
+  sm: "select-sm",
+  md: "",
+  lg: "select-lg"
+};
+var selectStatusClasses = {
+  error: "select-error",
+  success: "select-success"
+};
+function getSelectContainerClasses({
+  open,
+  loading,
+  disabled,
+  full,
+  className
+}) {
+  return cn(selectContainerClass, open && selectOpenClass, loading && selectLoadingClass, disabled && "select-disabled", full && selectFullClass, className);
+}
+function getSelectClasses({
+  size = "md",
+  status,
+  disabled,
+  className
+}) {
+  return cn(selectBaseClass, selectSizeClasses[size], status && selectStatusClasses[status], disabled && "select-disabled", className);
+}
+function getSelectOptionClasses({
+  selected,
+  disabled,
+  className
+}) {
+  return cn(selectOptionClass, selected && selectOptionSelectedClass, disabled && selectOptionDisabledClass, className);
+}
+
+// src/components/select/Select.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function isGroup(option) {
+  return "options" in option;
+}
+function optionLabel(option) {
+  return option.label ?? option.value;
+}
+function valueKey(value) {
+  return String(value);
+}
+function normalizeSingleValue(value) {
+  if (Array.isArray(value)) {
+    return value[0];
+  }
+  return typeof value === "string" || typeof value === "number" ? value : undefined;
+}
+function normalizeMultiValue(value) {
+  if (Array.isArray(value)) {
+    return value.filter((item) => typeof item === "string" || typeof item === "number");
+  }
+  const single = normalizeSingleValue(value);
+  return single === undefined ? [] : [single];
+}
+function optionsFromChildren(children) {
+  const result = [];
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === Option) {
+      const props = child.props;
+      result.push({
+        value: props.value,
+        label: props.children,
+        disabled: props.disabled,
+        className: props.className
+      });
+      return;
+    }
+    if (child.type === OptGroup) {
+      const props = child.props;
+      result.push({
+        label: props.label,
+        className: props.className,
+        options: optionsFromChildren(props.children).filter((option) => !isGroup(option))
+      });
+    }
+  });
+  return result;
+}
+function flattenOptions(options) {
+  return options.flatMap((option) => isGroup(option) ? option.options : option);
+}
+function matchesOption(option, searchValue, filterOption) {
+  if (!searchValue || filterOption === false) {
+    return true;
+  }
+  if (typeof filterOption === "function") {
+    return filterOption(searchValue, option);
+  }
+  const label = optionLabel(option);
+  const text = typeof label === "string" || typeof label === "number" ? String(label) : String(option.value);
+  return text.toLowerCase().includes(searchValue.toLowerCase());
+}
+function filterOptions(options, searchValue, filterOption) {
+  return options.map((option) => {
+    if (!isGroup(option)) {
+      return matchesOption(option, searchValue, filterOption) ? option : null;
+    }
+    const groupOptions = option.options.filter((child) => matchesOption(child, searchValue, filterOption));
+    return groupOptions.length > 0 ? { ...option, options: groupOptions } : null;
+  }).filter((option) => option !== null);
+}
+function renderValue(option) {
+  return option ? optionLabel(option) : null;
+}
+var Option = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  children
+}));
+Option.displayName = "Select.Option";
+var OptGroup = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  children
+}));
+OptGroup.displayName = "Select.OptGroup";
+var SelectRoot = forwardRef(({
+  allowClear,
+  children,
+  className,
+  defaultValue,
+  disabled,
+  filterOption,
+  loading,
+  mode,
+  onChange,
+  options,
+  placeholder,
+  showSearch,
+  size = "md",
+  status,
+  value,
+  ...props
+}, ref) => {
+  const multiple = mode === "multiple" || mode === "tags";
+  const sourceOptions = useMemo(() => options ?? optionsFromChildren(children), [children, options]);
+  const flatOptions = useMemo(() => flattenOptions(sourceOptions), [sourceOptions]);
+  const [open, setOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const [internalValue, setInternalValue] = useState(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
+  const controlled = value !== undefined;
+  const currentValue = controlled ? value : internalValue;
+  const selectedValues = multiple ? normalizeMultiValue(currentValue) : normalizeSingleValue(currentValue) === undefined ? [] : [normalizeSingleValue(currentValue)];
+  const selectedKeys = new Set(selectedValues.map(valueKey));
+  const selectedOptions = selectedValues.map((selectedValue) => flatOptions.find((option) => option.value === selectedValue) ?? {
+    value: selectedValue,
+    label: selectedValue
+  });
+  const visibleOptions = filterOptions(sourceOptions, searchValue, filterOption);
+  const hasValue = selectedValues.length > 0;
+  const searchable = showSearch || mode === "tags";
+  function emitChange(nextValue) {
+    if (!controlled) {
+      setInternalValue(nextValue);
+    }
+    const nextValues = Array.isArray(nextValue) ? nextValue : nextValue === undefined ? [] : [nextValue];
+    const nextOptions = nextValues.map((next) => flatOptions.find((option) => option.value === next) ?? {
+      value: next,
+      label: next
+    });
+    onChange?.(nextValue, multiple ? nextOptions : nextOptions[0]);
+  }
+  function selectOption(option) {
+    if (disabled || loading || option.disabled) {
+      return;
+    }
+    if (multiple) {
+      const optionKey = valueKey(option.value);
+      const nextValues = selectedKeys.has(optionKey) ? selectedValues.filter((item) => valueKey(item) !== optionKey) : [...selectedValues, option.value];
+      emitChange(nextValues);
+    } else {
+      emitChange(option.value);
+      setOpen(false);
+    }
+    setSearchValue("");
+  }
+  function clearValue(event) {
+    event.stopPropagation();
+    if (disabled || loading) {
+      return;
+    }
+    emitChange(multiple ? [] : undefined);
+    setSearchValue("");
+  }
+  function addTag() {
+    const tag = searchValue.trim();
+    if (mode !== "tags" || tag.length === 0) {
+      return;
+    }
+    if (!selectedKeys.has(tag)) {
+      emitChange([...selectedValues, tag]);
+    }
+    setSearchValue("");
+  }
+  function renderOption(option) {
+    const selected = selectedKeys.has(valueKey(option.value));
+    return /* @__PURE__ */ jsx("button", {
+      type: "button",
+      role: "option",
+      "aria-selected": selected,
+      disabled: disabled || option.disabled,
+      className: getSelectOptionClasses({
+        selected,
+        disabled: disabled || option.disabled,
+        className: option.className
+      }),
+      onClick: () => selectOption(option),
+      children: optionLabel(option)
+    }, valueKey(option.value));
+  }
+  function renderOptions(optionItems) {
+    return optionItems.map((option, index) => {
+      if (!isGroup(option)) {
+        return renderOption(option);
+      }
+      return /* @__PURE__ */ jsxs("div", {
+        className: cn(selectGroupClass, option.className),
+        role: "group",
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: selectGroupLabelClass,
+            children: option.label
+          }),
+          option.options.map(renderOption)
+        ]
+      }, `group-${index}`);
+    });
+  }
+  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx("span", {
+    className: selectTagClass,
+    children: renderValue(option)
+  }, valueKey(option.value))) : renderValue(selectedOptions[0]);
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getSelectContainerClasses({
+      open,
+      loading,
+      disabled,
+      full: true,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsxs("button", {
+        type: "button",
+        className: getSelectClasses({ size, status, disabled }),
+        disabled: disabled || loading,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        onClick: () => setOpen((current) => !current),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: selectSelectionClass,
+            children: hasValue ? selection : /* @__PURE__ */ jsx("span", {
+              className: selectPlaceholderClass,
+              children: placeholder
+            })
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: selectIconClass,
+            "aria-hidden": "true",
+            children: "v"
+          })
+        ]
+      }),
+      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: selectClearClass,
+        "aria-label": "Clear selection",
+        onClick: clearValue,
+        children: "x"
+      }) : null,
+      open ? /* @__PURE__ */ jsxs("div", {
+        className: selectDropdownClass,
+        role: "listbox",
+        "aria-multiselectable": multiple || undefined,
+        children: [
+          searchable ? /* @__PURE__ */ jsx("input", {
+            className: selectSearchClass,
+            value: searchValue,
+            placeholder: typeof placeholder === "string" ? placeholder : undefined,
+            onChange: (event) => setSearchValue(event.currentTarget.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                addTag();
+              }
+            }
+          }) : null,
+          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx("div", {
+            className: selectEmptyClass,
+            children: "No data"
+          })
+        ]
+      }) : null
+    ]
+  });
+});
+SelectRoot.displayName = "Select";
+var Select = SelectRoot;
+Select.Option = Option;
+Select.OptGroup = OptGroup;
+export {
+  Select
+};