@usefragments/ui 1.0.0

package/dist/components/Select/index.js

@@ -0,0 +1,259 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Select as Select$1 } from "@base-ui/react/select";
+import { useResolvedControlSize } from "../ComponentDefaults/index.js";
+import { useFormFieldIds, mergeAriaIds } from "../../utils/aria.js";
+import styles from "./Select.module.scss.js";
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+const SelectContext = React.createContext({
+  items: /* @__PURE__ */ new Map(),
+  registerItem: () => {
+  },
+  unregisterItem: () => {
+  },
+  size: "md"
+});
+function collectDeclaredItems(children, map) {
+  React.Children.forEach(children, (child) => {
+    var _a;
+    if (!React.isValidElement(child)) return;
+    if (child.type === SelectItem) {
+      const props = child.props;
+      map.set(props.value, props.children);
+      return;
+    }
+    const nested = (_a = child.props) == null ? void 0 : _a.children;
+    if (nested) collectDeclaredItems(nested, map);
+  });
+}
+const SelectRoot = React.forwardRef(function SelectRoot2({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  onChange,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  readOnly,
+  required,
+  name,
+  form,
+  autoComplete,
+  inputRef,
+  placeholder,
+  options,
+  label,
+  helperText,
+  error,
+  size: sizeProp,
+  className
+}, ref) {
+  const size = useResolvedControlSize(sizeProp);
+  const [internalValue, setInternalValue] = React.useState(
+    value ?? defaultValue ?? null
+  );
+  const [items, setItems] = React.useState(() => /* @__PURE__ */ new Map());
+  const registerItem = React.useCallback((itemValue, content) => {
+    setItems((prev) => {
+      const next = new Map(prev);
+      next.set(itemValue, content);
+      return next;
+    });
+  }, []);
+  const unregisterItem = React.useCallback((itemValue) => {
+    setItems((prev) => {
+      if (!prev.has(itemValue)) return prev;
+      const next = new Map(prev);
+      next.delete(itemValue);
+      return next;
+    });
+  }, []);
+  React.useEffect(() => {
+    if (value !== void 0) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  const selectedValue = value !== void 0 ? value : internalValue;
+  const optionItems = React.useMemo(
+    () => (options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))) ?? null,
+    [options]
+  );
+  const resolvedChildren = children ?? (optionItems ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SelectTrigger, {}),
+    /* @__PURE__ */ jsx(SelectContent, { children: optionItems })
+  ] }) : null);
+  const handleValueChange = React.useCallback(
+    (newValue) => {
+      var _a;
+      if (readOnly) return;
+      if (value === void 0) {
+        setInternalValue(newValue);
+      }
+      (_a = onChange ?? onValueChange) == null ? void 0 : _a(newValue);
+    },
+    [readOnly, value, onChange, onValueChange]
+  );
+  const declaredItems = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    options == null ? void 0 : options.forEach((option) => map.set(option.value, option.label));
+    collectDeclaredItems(children, map);
+    return map;
+  }, [children, options]);
+  const resolvedItems = React.useMemo(() => {
+    if (declaredItems.size === 0) return items;
+    const merged = new Map(declaredItems);
+    items.forEach((content, itemValue) => merged.set(itemValue, content));
+    return merged;
+  }, [declaredItems, items]);
+  const contextValue = React.useMemo(
+    () => ({
+      placeholder,
+      value: selectedValue,
+      items: resolvedItems,
+      registerItem,
+      unregisterItem,
+      size
+    }),
+    [placeholder, selectedValue, resolvedItems, registerItem, unregisterItem, size]
+  );
+  const { helperId, errorId, hasError, errorMessage } = useFormFieldIds("select", {
+    label,
+    helperText,
+    error
+  });
+  const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(" ");
+  const helperClasses = [styles.helper, hasError && styles.helperError].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref, className: wrapperClasses, children: [
+    /* @__PURE__ */ jsxs(
+      Select$1.Root,
+      {
+        value: value !== void 0 || readOnly ? selectedValue : void 0,
+        defaultValue: value === void 0 && !readOnly ? defaultValue : void 0,
+        onValueChange: handleValueChange,
+        open,
+        defaultOpen,
+        onOpenChange,
+        disabled,
+        readOnly,
+        required,
+        name,
+        form,
+        autoComplete,
+        inputRef,
+        "aria-describedby": mergeAriaIds(errorId, helperId),
+        children: [
+          label && /* @__PURE__ */ jsx(Select$1.Label, { className: styles.label, children: label }),
+          resolvedChildren
+        ]
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx("span", { id: helperId, className: helperClasses, children: helperText }),
+    errorMessage && /* @__PURE__ */ jsx("span", { id: errorId, className: styles.errorMessage, children: errorMessage })
+  ] }) });
+});
+function SelectTrigger({ children, placeholder, className, ...htmlProps }) {
+  const context = React.useContext(SelectContext);
+  const placeholderText = placeholder ?? context.placeholder;
+  const classes = [
+    styles.trigger,
+    context.size === "sm" && styles.triggerSm,
+    context.size === "lg" && styles.triggerLg,
+    className
+  ].filter(Boolean).join(" ");
+  const selectedContent = context.value != null ? context.items.get(context.value) : null;
+  const displayContent = selectedContent ?? (placeholderText ? /* @__PURE__ */ jsx("span", { className: styles.placeholder, children: placeholderText }) : null);
+  return /* @__PURE__ */ jsx(Select$1.Trigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: styles.value, children: displayContent }),
+    /* @__PURE__ */ jsx(Select$1.Icon, { className: styles.icon, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+  ] }) });
+}
+function SelectContent({
+  children,
+  className,
+  sideOffset = 4,
+  align = "start",
+  maxVisibleItems,
+  ...htmlProps
+}) {
+  const popupClasses = [styles.popup, className].filter(Boolean).join(" ");
+  const popupStyle = maxVisibleItems != null ? {
+    "--fui-select-max-items": maxVisibleItems + 0.5,
+    ...htmlProps.style
+  } : htmlProps.style;
+  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, { sideOffset, align, className: styles.positioner, children: /* @__PURE__ */ jsx(Select$1.Popup, { ...htmlProps, className: popupClasses, style: popupStyle, children }) }) });
+}
+function SelectItem({ children, value, disabled, className, ...htmlProps }) {
+  const { registerItem, unregisterItem } = React.useContext(SelectContext);
+  const classes = [styles.item, className].filter(Boolean).join(" ");
+  React.useEffect(() => {
+    registerItem(value, children);
+    return () => {
+      unregisterItem(value);
+    };
+  }, [registerItem, unregisterItem, value, children]);
+  return /* @__PURE__ */ jsxs(Select$1.Item, { ...htmlProps, value, disabled, className: classes, children: [
+    /* @__PURE__ */ jsx(Select$1.ItemText, { children }),
+    /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: styles.itemIndicator, children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+  ] });
+}
+function SelectGroup({ children, className, ...htmlProps }) {
+  const classes = [styles.group, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Select$1.Group, { ...htmlProps, className: classes, children });
+}
+function SelectGroupLabel({ children, className, ...htmlProps }) {
+  const classes = [styles.groupLabel, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Select$1.GroupLabel, { ...htmlProps, className: classes, children });
+}
+const Select = Object.assign(SelectRoot, {
+  Trigger: SelectTrigger,
+  Content: SelectContent,
+  Item: SelectItem,
+  Group: SelectGroup,
+  GroupLabel: SelectGroupLabel
+});
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectRoot,
+  SelectTrigger
+};

package/dist/components/Separator/Separator.module.scss.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const separator = "_separator_li1of_1";
+const horizontal = "_horizontal_li1of_6";
+const vertical = "_vertical_li1of_11";
+const withLabel = "_withLabel_li1of_17";
+const label = "_label_li1of_30";
+const spacingNone = "_spacingNone_li1of_40";
+const spacingSm = "_spacingSm_li1of_44";
+const spacingMd = "_spacingMd_li1of_51";
+const spacingLg = "_spacingLg_li1of_58";
+const soft = "_soft_li1of_65";
+const styles = {
+  separator,
+  horizontal,
+  vertical,
+  withLabel,
+  label,
+  spacingNone,
+  spacingSm,
+  spacingMd,
+  spacingLg,
+  soft
+};
+exports.default = styles;
+exports.horizontal = horizontal;
+exports.label = label;
+exports.separator = separator;
+exports.soft = soft;
+exports.spacingLg = spacingLg;
+exports.spacingMd = spacingMd;
+exports.spacingNone = spacingNone;
+exports.spacingSm = spacingSm;
+exports.vertical = vertical;
+exports.withLabel = withLabel;

package/dist/components/Separator/Separator.module.scss.js

@@ -0,0 +1,35 @@
+const separator = "_separator_li1of_1";
+const horizontal = "_horizontal_li1of_6";
+const vertical = "_vertical_li1of_11";
+const withLabel = "_withLabel_li1of_17";
+const label = "_label_li1of_30";
+const spacingNone = "_spacingNone_li1of_40";
+const spacingSm = "_spacingSm_li1of_44";
+const spacingMd = "_spacingMd_li1of_51";
+const spacingLg = "_spacingLg_li1of_58";
+const soft = "_soft_li1of_65";
+const styles = {
+  separator,
+  horizontal,
+  vertical,
+  withLabel,
+  label,
+  spacingNone,
+  spacingSm,
+  spacingMd,
+  spacingLg,
+  soft
+};
+export {
+  styles as default,
+  horizontal,
+  label,
+  separator,
+  soft,
+  spacingLg,
+  spacingMd,
+  spacingNone,
+  spacingSm,
+  vertical,
+  withLabel
+};

package/dist/components/Separator/index.cjs

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const separator = require("@base-ui/react/separator");
+const Separator_module = require("./Separator.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const spacingClasses = {
+  none: Separator_module.default.spacingNone,
+  sm: Separator_module.default.spacingSm,
+  md: Separator_module.default.spacingMd,
+  lg: Separator_module.default.spacingLg
+};
+const SeparatorRoot = React__namespace.forwardRef(
+  function Separator2({
+    orientation = "horizontal",
+    spacing = "none",
+    soft = false,
+    label,
+    className,
+    style,
+    ...htmlProps
+  }, ref) {
+    if (label && orientation === "horizontal") {
+      const classes2 = [
+        Separator_module.default.separator,
+        Separator_module.default.withLabel,
+        spacingClasses[spacing],
+        soft && Separator_module.default.soft,
+        className
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          role: "separator",
+          "aria-orientation": "horizontal",
+          className: classes2,
+          style,
+          ...htmlProps,
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: Separator_module.default.label, children: label })
+        }
+      );
+    }
+    const classes = [
+      Separator_module.default.separator,
+      orientation === "horizontal" ? Separator_module.default.horizontal : Separator_module.default.vertical,
+      spacingClasses[spacing],
+      soft && Separator_module.default.soft,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      separator.Separator,
+      {
+        ref,
+        orientation,
+        className: classes,
+        style,
+        ...htmlProps
+      }
+    );
+  }
+);
+const Separator = Object.assign(SeparatorRoot, {
+  Root: SeparatorRoot
+});
+exports.Separator = Separator;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface SeparatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Orientation of the separator */
+    orientation?: 'horizontal' | 'vertical';
+    /** Spacing around the separator */
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    /** Softer visual appearance */
+    soft?: boolean;
+    /** Optional label text (creates a labeled divider) */
+    label?: string;
+}
+export declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F,mCAAmC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2ED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}

package/dist/components/Separator/index.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+import styles from "./Separator.module.scss.js";
+const spacingClasses = {
+  none: styles.spacingNone,
+  sm: styles.spacingSm,
+  md: styles.spacingMd,
+  lg: styles.spacingLg
+};
+const SeparatorRoot = React.forwardRef(
+  function Separator2({
+    orientation = "horizontal",
+    spacing = "none",
+    soft = false,
+    label,
+    className,
+    style,
+    ...htmlProps
+  }, ref) {
+    if (label && orientation === "horizontal") {
+      const classes2 = [
+        styles.separator,
+        styles.withLabel,
+        spacingClasses[spacing],
+        soft && styles.soft,
+        className
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: "separator",
+          "aria-orientation": "horizontal",
+          className: classes2,
+          style,
+          ...htmlProps,
+          children: /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
+        }
+      );
+    }
+    const classes = [
+      styles.separator,
+      orientation === "horizontal" ? styles.horizontal : styles.vertical,
+      spacingClasses[spacing],
+      soft && styles.soft,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      Separator$1,
+      {
+        ref,
+        orientation,
+        className: classes,
+        style,
+        ...htmlProps
+      }
+    );
+  }
+);
+const Separator = Object.assign(SeparatorRoot, {
+  Root: SeparatorRoot
+});
+export {
+  Separator
+};

package/dist/components/Sidebar/Sidebar.module.scss.cjs

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const root = "_root_1nvg2_1";
+const mobile = "_mobile_1nvg2_34";
+const positionRight = "_positionRight_1nvg2_40";
+const collapsed = "_collapsed_1nvg2_45";
+const header = "_header_1nvg2_48";
+const nav = "_nav_1nvg2_49";
+const footer = "_footer_1nvg2_50";
+const sectionLabel = "_sectionLabel_1nvg2_57";
+const itemLabel = "_itemLabel_1nvg2_68";
+const itemBadge = "_itemBadge_1nvg2_69";
+const itemChevron = "_itemChevron_1nvg2_70";
+const item = "_item_1nvg2_68";
+const itemIcon = "_itemIcon_1nvg2_78";
+const collapseToggle = "_collapseToggle_1nvg2_81";
+const collapsedNoIcons = "_collapsedNoIcons_1nvg2_85";
+const offcanvasCollapsed = "_offcanvasCollapsed_1nvg2_88";
+const collapseToggleFloating = "_collapseToggleFloating_1nvg2_94";
+const rail = "_rail_1nvg2_108";
+const navScrollArea = "_navScrollArea_1nvg2_149";
+const section = "_section_1nvg2_57";
+const sectionHeader = "_sectionHeader_1nvg2_158";
+const sectionTrigger = "_sectionTrigger_1nvg2_166";
+const sectionActionWrapper = "_sectionActionWrapper_1nvg2_188";
+const sectionAction = "_sectionAction_1nvg2_188";
+const sectionList = "_sectionList_1nvg2_234";
+const submenu = "_submenu_1nvg2_235";
+const sectionCollapsible = "_sectionCollapsible_1nvg2_244";
+const itemWrapper = "_itemWrapper_1nvg2_270";
+const subItemWrapper = "_subItemWrapper_1nvg2_271";
+const submenuWrapper = "_submenuWrapper_1nvg2_272";
+const itemDisabled = "_itemDisabled_1nvg2_327";
+const itemActive = "_itemActive_1nvg2_336";
+const subItemDisabled = "_subItemDisabled_1nvg2_363";
+const itemExpanded = "_itemExpanded_1nvg2_419";
+const subItem = "_subItem_1nvg2_271";
+const subItemActive = "_subItemActive_1nvg2_496";
+const trigger = "_trigger_1nvg2_514";
+const overlay = "_overlay_1nvg2_555";
+const railCollapsed = "_railCollapsed_1nvg2_675";
+const menuSkeleton = "_menuSkeleton_1nvg2_679";
+const skeletonItem = "_skeletonItem_1nvg2_686";
+const skeletonLabel = "_skeletonLabel_1nvg2_694";
+const styles = {
+  root,
+  mobile,
+  positionRight,
+  collapsed,
+  header,
+  nav,
+  footer,
+  sectionLabel,
+  itemLabel,
+  itemBadge,
+  itemChevron,
+  item,
+  itemIcon,
+  collapseToggle,
+  collapsedNoIcons,
+  offcanvasCollapsed,
+  collapseToggleFloating,
+  rail,
+  navScrollArea,
+  section,
+  sectionHeader,
+  sectionTrigger,
+  sectionActionWrapper,
+  sectionAction,
+  sectionList,
+  submenu,
+  sectionCollapsible,
+  itemWrapper,
+  subItemWrapper,
+  submenuWrapper,
+  itemDisabled,
+  itemActive,
+  subItemDisabled,
+  itemExpanded,
+  subItem,
+  subItemActive,
+  trigger,
+  overlay,
+  railCollapsed,
+  menuSkeleton,
+  skeletonItem,
+  skeletonLabel
+};
+exports.collapseToggle = collapseToggle;
+exports.collapseToggleFloating = collapseToggleFloating;
+exports.collapsed = collapsed;
+exports.collapsedNoIcons = collapsedNoIcons;
+exports.default = styles;
+exports.footer = footer;
+exports.header = header;
+exports.item = item;
+exports.itemActive = itemActive;
+exports.itemBadge = itemBadge;
+exports.itemChevron = itemChevron;
+exports.itemDisabled = itemDisabled;
+exports.itemExpanded = itemExpanded;
+exports.itemIcon = itemIcon;
+exports.itemLabel = itemLabel;
+exports.itemWrapper = itemWrapper;
+exports.menuSkeleton = menuSkeleton;
+exports.mobile = mobile;
+exports.nav = nav;
+exports.navScrollArea = navScrollArea;
+exports.offcanvasCollapsed = offcanvasCollapsed;
+exports.overlay = overlay;
+exports.positionRight = positionRight;
+exports.rail = rail;
+exports.railCollapsed = railCollapsed;
+exports.root = root;
+exports.section = section;
+exports.sectionAction = sectionAction;
+exports.sectionActionWrapper = sectionActionWrapper;
+exports.sectionCollapsible = sectionCollapsible;
+exports.sectionHeader = sectionHeader;
+exports.sectionLabel = sectionLabel;
+exports.sectionList = sectionList;
+exports.sectionTrigger = sectionTrigger;
+exports.skeletonItem = skeletonItem;
+exports.skeletonLabel = skeletonLabel;
+exports.subItem = subItem;
+exports.subItemActive = subItemActive;
+exports.subItemDisabled = subItemDisabled;
+exports.subItemWrapper = subItemWrapper;
+exports.submenu = submenu;
+exports.submenuWrapper = submenuWrapper;
+exports.trigger = trigger;