@ayasofyazilim/ui 0.0.0 → 0.0.1

package/dist/custom/schema-form/widgets/url.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/schema-form/widgets/url.tsx"],"sourcesContent":["import {} from \"@radix-ui/react-tooltip\";\r\nimport {\r\n  InputGroup,\r\n  InputGroupAddon,\r\n  InputGroupInput,\r\n  InputGroupText,\r\n} from \"@repo/ayasofyazilim-ui/components/input-group\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { WidgetProps } from \"@rjsf/utils\";\r\n\r\nexport const URLInputWidget = (props: WidgetProps) => {\r\n  const {\r\n    uiSchema,\r\n    id,\r\n    className,\r\n    onChange,\r\n    value,\r\n    defaultValue,\r\n    disabled,\r\n    readOnly,\r\n  } = props;\r\n\r\n  const required = uiSchema?.[\"ui:required\"] || props.required;\r\n\r\n  return (\r\n    <InputGroup>\r\n      <InputGroupInput\r\n        placeholder=\"example.com\"\r\n        id={id}\r\n        data-testid={id}\r\n        onBlur={\r\n          props.onBlur && ((event) => props.onBlur(id, event.target.value))\r\n        }\r\n        className={cn(\"pl-1!\", className)}\r\n        required={required}\r\n        onChange={(event) => {\r\n          if (event.target.value === \"\") {\r\n            onChange(undefined);\r\n          } else {\r\n            onChange(event.target.value);\r\n          }\r\n        }}\r\n        defaultValue={value || defaultValue}\r\n        readOnly={readOnly}\r\n        disabled={disabled}\r\n        autoComplete={uiSchema?.[\"ui:autocomplete\"]}\r\n        onKeyDown={(e) => {\r\n          e.key === \"Enter\" && e.preventDefault();\r\n        }}\r\n      />\r\n      <InputGroupAddon>\r\n        <InputGroupText>{props.placeholder}</InputGroupText>\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  );\r\n};\r\n"],"mappings":"AAyBI,SACE,KADF;AAxBJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAGZ,MAAM,iBAAiB,CAAC,UAAuB;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,WAAW,aAAa,KAAK,MAAM;AAEpD,SACE,qBAAC,cACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAY;AAAA,QACZ;AAAA,QACA,eAAa;AAAA,QACb,QACE,MAAM,WAAW,CAAC,UAAU,MAAM,OAAO,IAAI,MAAM,OAAO,KAAK;AAAA,QAEjE,WAAW,GAAG,SAAS,SAAS;AAAA,QAChC;AAAA,QACA,UAAU,CAAC,UAAU;AACnB,cAAI,MAAM,OAAO,UAAU,IAAI;AAC7B,qBAAS,MAAS;AAAA,UACpB,OAAO;AACL,qBAAS,MAAM,OAAO,KAAK;AAAA,UAC7B;AAAA,QACF;AAAA,QACA,cAAc,SAAS;AAAA,QACvB;AAAA,QACA;AAAA,QACA,cAAc,WAAW,iBAAiB;AAAA,QAC1C,WAAW,CAAC,MAAM;AAChB,YAAE,QAAQ,WAAW,EAAE,eAAe;AAAA,QACxC;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBACC,8BAAC,kBAAgB,gBAAM,aAAY,GACrC;AAAA,KACF;AAEJ;","names":[]}

package/dist/custom/section-layout-v2.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { Skeleton } from "@repo/ayasofyazilim-ui/components/skeleton";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+function SectionLayoutNavbar({
+  sections,
+  activeSectionId,
+  onSectionChange,
+  linkElement,
+  vertical
+}) {
+  const LinkElement = linkElement || Button;
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(
+        "flex gap-4 text-sm text-center md:text-left p-3 ",
+        vertical ? "flex-col border-b md:border-b-0 md:border-r overflow-auto min-w-full md:min-w-60 items-center md:items-start" : "flex-col md:flex-row border-b"
+      ),
+      children: sections.map((section) => /* @__PURE__ */ jsxs(
+        LinkElement,
+        {
+          className: cn(
+            activeSectionId === section.id ? "font-semibold text-primary hover:no-underline m-0 p-0 h-auto justify-start" : "font-normal text-muted-foreground hover:no-underline m-0 p-0 h-auto justify-start",
+            section.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+            section.className
+          ),
+          "data-active": activeSectionId === section.id,
+          href: section.link || "#",
+          onClick: () => {
+            if (section.disabled) return;
+            if (!linkElement && onSectionChange) {
+              onSectionChange(section.id);
+            }
+          },
+          tabIndex: section.disabled ? -1 : 0,
+          variant: "link",
+          children: [
+            section.children && section.children,
+            !section.children && section.name
+          ]
+        },
+        section.id
+      ))
+    }
+  );
+}
+function SectionLayoutContent({
+  sectionId,
+  children,
+  className
+}) {
+  const context = useContext(SectionLayoutContext);
+  const { activeSectionId } = context;
+  if (activeSectionId !== sectionId) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: `section-${sectionId}`,
+      className: cn("w-full p-5 overflow-auto h-full flex-1", className),
+      children
+    }
+  );
+}
+const SectionLayoutContext = createContext({
+  activeSectionId: ""
+});
+function SectionLayout({
+  children,
+  sections,
+  defaultActiveSectionId,
+  linkElement,
+  vertical
+}) {
+  const [activeSectionId, setActiveSectionId] = useState(
+    defaultActiveSectionId || sections?.[0]?.id
+  );
+  useEffect(() => {
+    if (linkElement && defaultActiveSectionId) {
+      setActiveSectionId(defaultActiveSectionId);
+    }
+  }, [defaultActiveSectionId]);
+  const contextValue = useMemo(
+    () => ({ activeSectionId: activeSectionId || "" }),
+    [activeSectionId]
+  );
+  return /* @__PURE__ */ jsx(SectionLayoutContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: vertical ? "flex flex-wrap md:flex-nowrap rounded-lg h-full overflow-hidden mb-5" : "rounded-lg h-full overflow-hidden flex flex-col",
+      children: [
+        /* @__PURE__ */ jsx(
+          SectionLayoutNavbar,
+          {
+            sections,
+            activeSectionId: activeSectionId || "",
+            onSectionChange: setActiveSectionId,
+            linkElement,
+            vertical
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+}
+const SectionLayoutSkeleton = ({ vertical }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: vertical ? "flex flex-wrap md:flex-nowrap rounded-lg h-full overflow-hidden" : "rounded-lg h-full overflow-hidden flex flex-col",
+    children: [
+      /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          className: cn(
+            "flex gap-4 text-sm text-center md:text-left p-5 ",
+            vertical ? "flex-col border-b md:border-b-0 md:border-r min-w-full md:min-w-60 items-center md:items-start" : "flex-col md:flex-row border-b"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full bg-gray-200" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full bg-gray-200" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full bg-gray-200" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full bg-gray-200" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full bg-gray-200" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "w-full p-5 overflow-auto h-full flex-1", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full bg-gray-200 mb-2" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full bg-gray-200 mb-2" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full bg-gray-200 mb-2" })
+      ] })
+    ]
+  }
+);
+export {
+  SectionLayout,
+  SectionLayoutContent,
+  SectionLayoutNavbar,
+  SectionLayoutSkeleton
+};
+//# sourceMappingURL=section-layout-v2.js.map

package/dist/custom/section-layout-v2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/section-layout-v2.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, {\r\n  createContext,\r\n  ElementType,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useState,\r\n} from \"react\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport { Skeleton } from \"@repo/ayasofyazilim-ui/components/skeleton\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\n\r\nexport interface ISection {\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n  disabled?: boolean;\r\n  id: string;\r\n  link?: string;\r\n  name: string;\r\n}\r\n\r\nexport interface ISectionLayoutNavbarProps {\r\n  activeSectionId: string;\r\n  linkElement?: ElementType;\r\n  onSectionChange?: (sectionId: string) => void;\r\n  sections: Array<ISection>;\r\n  vertical?: boolean;\r\n}\r\n\r\n/**\r\n * Renders a navigation bar for a section layout.\r\n *\r\n * @param {Array<ISection>} props.sections - The sections to be rendered in the navigation bar.\r\n * @param {string} props.activeSectionId - The ID of the active section.\r\n * @param {(sectionId: string) => void} [props.onSectionChange] - The function to be called when a section is clicked.\r\n * @param {React.ElementType} [props.linkElement] - The element to be used for the section links. (default: Button)\r\n * @param {boolean} [props.vertical] - Whether the navigation bar should be rendered vertically.\r\n * @return {React.ReactNode} The rendered navigation bar.\r\n */\r\nexport function SectionLayoutNavbar({\r\n  sections,\r\n  activeSectionId,\r\n  onSectionChange,\r\n  linkElement,\r\n  vertical,\r\n}: ISectionLayoutNavbarProps) {\r\n  const LinkElement = linkElement || Button;\r\n  return (\r\n    <nav\r\n      className={cn(\r\n        \"flex gap-4 text-sm text-center md:text-left p-3 \",\r\n        vertical\r\n          ? \"flex-col border-b md:border-b-0 md:border-r overflow-auto min-w-full md:min-w-60 items-center md:items-start\"\r\n          : \"flex-col md:flex-row border-b\"\r\n      )}\r\n    >\r\n      {sections.map((section) => (\r\n        <LinkElement\r\n          className={cn(\r\n            activeSectionId === section.id\r\n              ? \"font-semibold text-primary hover:no-underline m-0 p-0 h-auto justify-start\"\r\n              : \"font-normal text-muted-foreground hover:no-underline m-0 p-0 h-auto justify-start\",\r\n            section.disabled\r\n              ? \"cursor-not-allowed opacity-50\"\r\n              : \"cursor-pointer\",\r\n            section.className\r\n          )}\r\n          data-active={activeSectionId === section.id}\r\n          href={section.link || \"#\"}\r\n          onClick={() => {\r\n            if (section.disabled) return;\r\n            if (!linkElement && onSectionChange) {\r\n              onSectionChange(section.id);\r\n            }\r\n          }}\r\n          key={section.id}\r\n          tabIndex={section.disabled ? -1 : 0}\r\n          variant=\"link\"\r\n        >\r\n          {section.children && section.children}\r\n          {!section.children && section.name}\r\n        </LinkElement>\r\n      ))}\r\n    </nav>\r\n  );\r\n}\r\n\r\nexport interface ISectionContentProps {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n  sectionId: string;\r\n}\r\n/**\r\n * Renders the content of a section layout based on the active section ID. It must be inside of SectionLayout component.\r\n *\r\n * @param {string} sectionId - The ID of the section to render.\r\n * @param {React.ReactNode} children - The content to be rendered inside the section layout.\r\n * @param {string} className - Additional CSS classes for styling.\r\n * @return {JSX.Element | null} The rendered section layout content or null if the section is not active.\r\n */\r\nexport function SectionLayoutContent({\r\n  sectionId,\r\n  children,\r\n  className,\r\n}: ISectionContentProps) {\r\n  const context = useContext(SectionLayoutContext);\r\n  const { activeSectionId } = context;\r\n  if (activeSectionId !== sectionId) return null;\r\n\r\n  return (\r\n    <div\r\n      id={`section-${sectionId}`}\r\n      className={cn(\"w-full p-5 overflow-auto h-full flex-1\", className)}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nconst SectionLayoutContext = createContext({\r\n  activeSectionId: \"\",\r\n});\r\nexport interface ISectionLayoutProps {\r\n  children: React.ReactNode;\r\n  defaultActiveSectionId?: string;\r\n  linkElement?: ElementType;\r\n  sections: Array<ISection>;\r\n  vertical?: boolean;\r\n}\r\n\r\n/**\r\n * Renders a section layout component with a navigation bar and content area.\r\n *\r\n * @param {React.ReactNode} children - The content to be rendered inside the section layout.\r\n * @param {Array<ISection>} sections - The sections to be rendered in the navigation bar.\r\n * @param {string} [defaultActiveSectionId] - The ID of the section to be active by default.\r\n * @param {ElementType} [linkElement] - The element to be used for the section links. (default: Button)\r\n * @param {boolean} [vertical] - Whether the layout should be rendered vertically.\r\n * @return {JSX.Element} The rendered section layout component.\r\n */\r\nexport function SectionLayout({\r\n  children,\r\n  sections,\r\n  defaultActiveSectionId,\r\n  linkElement,\r\n  vertical,\r\n}: ISectionLayoutProps) {\r\n  const [activeSectionId, setActiveSectionId] = useState(\r\n    defaultActiveSectionId || sections?.[0]?.id\r\n  );\r\n  useEffect(() => {\r\n    if (linkElement && defaultActiveSectionId) {\r\n      setActiveSectionId(defaultActiveSectionId);\r\n    }\r\n  }, [defaultActiveSectionId]);\r\n  const contextValue = useMemo(\r\n    () => ({ activeSectionId: activeSectionId || \"\" }),\r\n    [activeSectionId]\r\n  );\r\n  return (\r\n    <SectionLayoutContext.Provider value={contextValue}>\r\n      <div\r\n        className={\r\n          vertical\r\n            ? \"flex flex-wrap md:flex-nowrap rounded-lg h-full overflow-hidden mb-5\"\r\n            : \"rounded-lg h-full overflow-hidden flex flex-col\"\r\n        }\r\n      >\r\n        <SectionLayoutNavbar\r\n          sections={sections}\r\n          activeSectionId={activeSectionId || \"\"}\r\n          onSectionChange={setActiveSectionId}\r\n          linkElement={linkElement}\r\n          vertical={vertical}\r\n        />\r\n        {children}\r\n      </div>\r\n    </SectionLayoutContext.Provider>\r\n  );\r\n}\r\n\r\nexport const SectionLayoutSkeleton = ({ vertical }: { vertical?: boolean }) => (\r\n  <div\r\n    className={\r\n      vertical\r\n        ? \"flex flex-wrap md:flex-nowrap rounded-lg h-full overflow-hidden\"\r\n        : \"rounded-lg h-full overflow-hidden flex flex-col\"\r\n    }\r\n  >\r\n    <nav\r\n      className={cn(\r\n        \"flex gap-4 text-sm text-center md:text-left p-5 \",\r\n        vertical\r\n          ? \"flex-col border-b md:border-b-0 md:border-r min-w-full md:min-w-60 items-center md:items-start\"\r\n          : \"flex-col md:flex-row border-b\"\r\n      )}\r\n    >\r\n      <Skeleton className=\"h-6 w-full bg-gray-200\" />\r\n      <Skeleton className=\"h-6 w-full bg-gray-200\" />\r\n      <Skeleton className=\"h-6 w-full bg-gray-200\" />\r\n      <Skeleton className=\"h-6 w-full bg-gray-200\" />\r\n      <Skeleton className=\"h-6 w-full bg-gray-200\" />\r\n    </nav>\r\n    <div className=\"w-full p-5 overflow-auto h-full flex-1\">\r\n      <Skeleton className=\"h-40 w-full bg-gray-200 mb-2\" />\r\n      <Skeleton className=\"h-40 w-full bg-gray-200 mb-2\" />\r\n      <Skeleton className=\"h-40 w-full bg-gray-200 mb-2\" />\r\n    </div>\r\n  </div>\r\n);\r\n"],"mappings":"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","names":[]}

package/dist/custom/select-tabs.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Circle, CircleCheckBig } from "lucide-react";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+const variants = {
+  default: "flex flex-row justify-between border-2 border-gray-300 gap-5 text-gray-700/80 flex-1",
+  active: "flex flex-row justify-between border-2 border-primary/80  gap-5 text-primary/80 hover:text-primary  flex-1"
+};
+function SelectTabsContent({
+  value,
+  children
+}) {
+  const { activeTab, onChange } = useContext(SelectTabsContext);
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: activeTab === value ? variants.active : variants.default,
+      variant: "ghost",
+      onClick: () => onChange(value),
+      children: [
+        children,
+        activeTab === value ? /* @__PURE__ */ jsx(CircleCheckBig, { size: 16 }) : /* @__PURE__ */ jsx(Circle, { size: 16 })
+      ]
+    },
+    value
+  );
+}
+const SelectTabsContext = createContext({
+  activeTab: "",
+  onChange: () => {
+  }
+});
+function SelectTabs({
+  deselect,
+  children,
+  value = "",
+  onValueChange,
+  disabled,
+  className
+}) {
+  const [activeTab, setActiveTab] = useState(value);
+  const contextValue = useMemo(() => ({ activeTab, onChange }), [activeTab]);
+  function onChange(newValue) {
+    if (disabled) return;
+    if (newValue === activeTab && deselect) {
+      setActiveTab("");
+      onValueChange?.("");
+    } else if (newValue !== activeTab) {
+      setActiveTab(newValue);
+      onValueChange?.(newValue);
+    }
+  }
+  return /* @__PURE__ */ jsx(SelectTabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("w-full grid gap-3", className), children }) });
+}
+export {
+  SelectTabsContent,
+  SelectTabs as default
+};
+//# sourceMappingURL=select-tabs.js.map

package/dist/custom/select-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/select-tabs.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Circle, CircleCheckBig } from \"lucide-react\";\r\nimport React, {\r\n  createContext,\r\n  JSX,\r\n  useContext,\r\n  useMemo,\r\n  useState,\r\n} from \"react\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\n\r\nconst variants = {\r\n  default:\r\n    \"flex flex-row justify-between border-2 border-gray-300 gap-5 text-gray-700/80 flex-1\",\r\n  active:\r\n    \"flex flex-row justify-between border-2 border-primary/80  gap-5 text-primary/80 hover:text-primary  flex-1\",\r\n};\r\n\r\ninterface ISelectTabsContentProps {\r\n  children: JSX.Element | string;\r\n  value: string;\r\n}\r\n/**\r\n * Renders the content of a select tab.\r\n *\r\n * @param {ISelectTabsContentProps} props - The properties for the select tab content.\r\n * @param {string} props.value - The value of the tab.\r\n * @param {JSX.Element | string} props.children - The content of the tab.\r\n * @return {JSX.Element} The rendered select tab content.\r\n */\r\nexport function SelectTabsContent({\r\n  value,\r\n  children,\r\n}: ISelectTabsContentProps) {\r\n  const { activeTab, onChange } = useContext(SelectTabsContext);\r\n  return (\r\n    <Button\r\n      key={value}\r\n      className={activeTab === value ? variants.active : variants.default}\r\n      variant=\"ghost\"\r\n      onClick={() => onChange(value)}\r\n    >\r\n      {children}\r\n      {activeTab === value ? (\r\n        <CircleCheckBig size={16} />\r\n      ) : (\r\n        <Circle size={16} />\r\n      )}\r\n    </Button>\r\n  );\r\n}\r\ninterface IContextProps {\r\n  activeTab: string;\r\n  onChange: (value: string) => void;\r\n}\r\nconst SelectTabsContext = createContext<IContextProps>({\r\n  activeTab: \"\",\r\n  onChange: () => {},\r\n});\r\ninterface ISelectTabsProps {\r\n  children?: React.ReactNode;\r\n  deselect?: boolean;\r\n  disabled?: boolean;\r\n  onValueChange?: (value: string) => void;\r\n  value?: string;\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Renders a set of selectable tabs.\r\n *\r\n * @param {ISelectTabsProps} props - The properties for the select tabs.\r\n * @param {boolean} props.deselect - Whether the tabs can have a null value.\r\n * @param {React.ReactNode} props.children - The content of the tabs.\r\n * @param {string } [props.value] - The initial active tab value.\r\n * @param {(newValue: string) => void} [props.onValueChange] - The callback function triggered when the active tab value changes.\r\n * @param {boolean} [props.disabled] - Whether the tabs are disabled.\r\n * @return {JSX.Element} The rendered select tabs.\r\n */\r\nexport default function SelectTabs({\r\n  deselect,\r\n  children,\r\n  value = \"\",\r\n  onValueChange,\r\n  disabled,\r\n  className,\r\n}: ISelectTabsProps) {\r\n  const [activeTab, setActiveTab] = useState(value);\r\n  const contextValue = useMemo(() => ({ activeTab, onChange }), [activeTab]);\r\n  function onChange(newValue: string) {\r\n    if (disabled) return;\r\n\r\n    if (newValue === activeTab && deselect) {\r\n      setActiveTab(\"\");\r\n      onValueChange?.(\"\");\r\n    } else if (newValue !== activeTab) {\r\n      setActiveTab(newValue);\r\n      onValueChange?.(newValue);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <SelectTabsContext.Provider value={contextValue}>\r\n      <div className={cn(\"w-full grid gap-3\", className)}>{children}</div>\r\n    </SelectTabsContext.Provider>\r\n  );\r\n}\r\n"],"mappings":";AAsCI,SAQI,KARJ;AApCJ,SAAS,QAAQ,sBAAsB;AACvC;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,UAAU;AAEnB,MAAM,WAAW;AAAA,EACf,SACE;AAAA,EACF,QACE;AACJ;AAcO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,EAAE,WAAW,SAAS,IAAI,WAAW,iBAAiB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,WAAW,cAAc,QAAQ,SAAS,SAAS,SAAS;AAAA,MAC5D,SAAQ;AAAA,MACR,SAAS,MAAM,SAAS,KAAK;AAAA,MAE5B;AAAA;AAAA,QACA,cAAc,QACb,oBAAC,kBAAe,MAAM,IAAI,IAE1B,oBAAC,UAAO,MAAM,IAAI;AAAA;AAAA;AAAA,IATf;AAAA,EAWP;AAEJ;AAKA,MAAM,oBAAoB,cAA6B;AAAA,EACrD,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAAC;AACnB,CAAC;AAqBc,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,eAAe,QAAQ,OAAO,EAAE,WAAW,SAAS,IAAI,CAAC,SAAS,CAAC;AACzE,WAAS,SAAS,UAAkB;AAClC,QAAI,SAAU;AAEd,QAAI,aAAa,aAAa,UAAU;AACtC,mBAAa,EAAE;AACf,sBAAgB,EAAE;AAAA,IACpB,WAAW,aAAa,WAAW;AACjC,mBAAa,QAAQ;AACrB,sBAAgB,QAAQ;AAAA,IAC1B;AAAA,EACF;AAEA,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,8BAAC,SAAI,WAAW,GAAG,qBAAqB,SAAS,GAAI,UAAS,GAChE;AAEJ;","names":[]}

package/dist/custom/selectable.js

@@ -0,0 +1,231 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, ChevronsUpDown, XIcon } from "lucide-react";
+import { Fragment as Fragment2, useCallback, useEffect, useMemo, useState } from "react";
+import { Badge } from "../components/badge";
+import { Button } from "../components/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../components/collapsible";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../components/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/popover";
+import { Skeleton } from "../components/skeleton";
+import { useDebounce } from "../hooks/use-debounce";
+import { cn } from "../lib/utils";
+function Selectable({
+  id,
+  className,
+  options,
+  defaultValue,
+  getKey,
+  getLabel,
+  getGroup,
+  getDisabled,
+  onSearch,
+  onChange,
+  singular = false,
+  singleLine,
+  selectedText = "Selected",
+  noResult = "Nothing to show.",
+  searchPlaceholderText = "Search...",
+  makeAChoiceText = "Make a choice...",
+  typeToSearchText = "Type to search...",
+  disabled = false,
+  renderOption,
+  renderTrigger: Trigger
+}) {
+  const [open, setOpen] = useState(false);
+  const [searchInput, setSearchInput] = useState("");
+  const searchValue = useDebounce(searchInput, 500);
+  const [searching, setSearching] = useState(false);
+  const [searchResults, setSearchResults] = useState([]);
+  const [selectedOptions, setSelectedOptions] = useState(
+    defaultValue
+  );
+  const selectableOptions = useMemo(() => {
+    const sourceOptions = onSearch && searchValue ? searchResults : options;
+    const selectableOptions2 = sourceOptions?.filter(
+      (option) => !selectedOptions?.some(
+        (selected) => getKey(selected) === getKey(option)
+      )
+    ) || [];
+    if (!getGroup)
+      return { groupedOptions: { "": selectableOptions2 }, sortedTypes: [""] };
+    const groupedOptions = {};
+    selectableOptions2.forEach((option) => {
+      const type = getGroup(option);
+      if (!groupedOptions[type]) {
+        groupedOptions[type] = [];
+      }
+      groupedOptions[type].push(option);
+    });
+    const sortedTypes = Object.keys(groupedOptions).sort();
+    return { groupedOptions, sortedTypes };
+  }, [selectedOptions, searchResults, options, searchValue, getKey, getGroup]);
+  const toggleSelection = useCallback(
+    (option, isSelected) => {
+      if (getDisabled?.(option)) return;
+      if (singular) {
+        const newSelection = isSelected ? [option] : [];
+        setSelectedOptions(newSelection);
+        onChange(newSelection);
+        setOpen(false);
+        return;
+      }
+      setSelectedOptions((prev) => {
+        const newSelection = isSelected ? [...prev || [], option] : prev?.filter((item) => getKey(item) !== getKey(option)) || [];
+        onChange(newSelection);
+        return newSelection;
+      });
+    },
+    [singular, getKey, getDisabled, onChange]
+  );
+  const handleSearchChange = useCallback((search) => {
+    setSearching(!!search);
+    setSearchInput(search);
+  }, []);
+  useEffect(() => {
+    if (!onSearch) {
+      setSearching(false);
+      setSearchResults([]);
+      return;
+    }
+    if (searchValue !== searchInput) return;
+    setSearching(true);
+    setSearchResults([]);
+    onSearch(searchValue).then((fetchedOptions) => {
+      setSearchResults(fetchedOptions);
+    }).finally(() => {
+      setSearching(false);
+    });
+  }, [onSearch, searchValue, searchInput]);
+  const onPopoverOpenChange = useCallback(
+    (isOpen) => {
+      if (disabled) return;
+      setOpen(isOpen);
+      setSearchInput("");
+    },
+    [disabled]
+  );
+  const TriggerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    selectedOptions?.length ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1 overflow-hidden w-full", children: [
+      !singleLine && selectedOptions.map((option) => {
+        const key = getKey(option);
+        const label = getLabel(option);
+        if (singular) {
+          return /* @__PURE__ */ jsx(Fragment2, { children: label }, key);
+        }
+        return /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "secondary",
+            className: "hover:animate-pulse",
+            onClick: (e) => {
+              if (disabled) return;
+              e.stopPropagation();
+              toggleSelection(option, false);
+            },
+            children: [
+              label,
+              /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+            ]
+          },
+          key
+        );
+      }),
+      singleLine && /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOptions.map((option) => getLabel(option)).join(", ") })
+    ] }) : makeAChoiceText,
+    /* @__PURE__ */ jsx(ChevronsUpDown, { className: "opacity-50" })
+  ] });
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: onPopoverOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        id,
+        className: cn(
+          "w-full justify-between h-max hover:bg-accent/30",
+          className
+        ),
+        disabled,
+        asChild: true,
+        children: Trigger ? /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Trigger, { disabled, children: TriggerContent }) }) : /* @__PURE__ */ jsx(Button, { variant: "outline", disabled, children: TriggerContent })
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(
+        CommandInput,
+        {
+          placeholder: searchPlaceholderText,
+          className: "h-9",
+          onValueChange: (search) => handleSearchChange(search)
+        }
+      ),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        searching && /* @__PURE__ */ jsxs("div", { className: "p-1 text-sm", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-full mb-1" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-full mb-1" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-full mb-1" })
+        ] }),
+        !searching && !!selectedOptions?.length && !singular && /* @__PURE__ */ jsxs(Collapsible, { className: "border-b", children: [
+          /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            CommandGroup,
+            {
+              className: "[&[data-state=open]_svg]:-rotate-90 cursor-pointer",
+              heading: /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+                selectedText,
+                /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 transition-all" })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(CollapsibleContent, { className: "px-1", children: selectedOptions.map((option) => {
+            const key = getKey(option);
+            const isDisabled = getDisabled?.(option) ?? false;
+            return /* @__PURE__ */ jsx(
+              CommandItem,
+              {
+                id: "option-" + key,
+                value: key,
+                disabled: isDisabled,
+                onSelect: () => toggleSelection(option, false),
+                children: renderOption ? renderOption(option) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  getLabel(option),
+                  /* @__PURE__ */ jsx(Check, { className: "ml-auto opacity-100" })
+                ] })
+              },
+              key
+            );
+          }) })
+        ] }),
+        !searching && /* @__PURE__ */ jsx(CommandEmpty, { id: "no-result-text", children: onSearch && !options?.length && !searchValue ? typeToSearchText : noResult }),
+        !searching && selectableOptions.sortedTypes?.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group, children: selectableOptions.groupedOptions[group]?.map((option) => {
+          const key = getKey(option);
+          const isDisabled = getDisabled?.(option) ?? false;
+          return /* @__PURE__ */ jsx(
+            CommandItem,
+            {
+              id: "option-" + key,
+              value: getLabel(option),
+              disabled: isDisabled,
+              onSelect: () => toggleSelection(option, true),
+              children: getLabel(option)
+            },
+            key
+          );
+        }) }, group))
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  Selectable
+};
+//# sourceMappingURL=selectable.js.map

package/dist/custom/selectable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/selectable.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Check, ChevronDown, ChevronsUpDown, XIcon } from \"lucide-react\";\r\n\r\nimport { Fragment, useCallback, useEffect, useMemo, useState } from \"react\";\r\nimport { Badge } from \"../components/badge\";\r\nimport { Button } from \"../components/button\";\r\nimport {\r\n  Collapsible,\r\n  CollapsibleContent,\r\n  CollapsibleTrigger,\r\n} from \"../components/collapsible\";\r\nimport {\r\n  Command,\r\n  CommandEmpty,\r\n  CommandGroup,\r\n  CommandInput,\r\n  CommandItem,\r\n  CommandList,\r\n} from \"../components/command\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../components/popover\";\r\nimport { Skeleton } from \"../components/skeleton\";\r\nimport { useDebounce } from \"../hooks/use-debounce\";\r\nimport { cn } from \"../lib/utils\";\r\n\r\nexport type SelectableProps<T> = {\r\n  id?: string;\r\n  className?: string;\r\n  disabled?: boolean;\r\n  options?: T[];\r\n  defaultValue?: T[];\r\n  getKey: (option: T) => string;\r\n  getLabel: (option: T) => string;\r\n  getGroup?: (option: T) => string;\r\n  getDisabled?: (option: T) => boolean;\r\n  onSearch?: (search: string) => Promise<T[]>;\r\n  onChange: (value: T[]) => void;\r\n  singular?: boolean;\r\n  singleLine?: boolean;\r\n  selectedText?: string;\r\n  noResult?: string;\r\n  searchPlaceholderText?: string;\r\n  makeAChoiceText?: string;\r\n  typeToSearchText?: string;\r\n  renderOption?: (option: T) => React.ReactNode;\r\n  renderTrigger?: ({\r\n    children,\r\n    disabled,\r\n  }: {\r\n    children: React.ReactNode;\r\n    disabled: boolean;\r\n  }) => React.ReactNode;\r\n};\r\n\r\nexport function Selectable<T>({\r\n  id,\r\n  className,\r\n  options,\r\n  defaultValue,\r\n  getKey,\r\n  getLabel,\r\n  getGroup,\r\n  getDisabled,\r\n  onSearch,\r\n  onChange,\r\n  singular = false,\r\n  singleLine,\r\n  selectedText = \"Selected\",\r\n  noResult = \"Nothing to show.\",\r\n  searchPlaceholderText = \"Search...\",\r\n  makeAChoiceText = \"Make a choice...\",\r\n  typeToSearchText = \"Type to search...\",\r\n  disabled = false,\r\n  renderOption,\r\n  renderTrigger: Trigger,\r\n}: SelectableProps<T>) {\r\n  const [open, setOpen] = useState(false);\r\n\r\n  const [searchInput, setSearchInput] = useState(\"\");\r\n  const searchValue = useDebounce(searchInput, 500);\r\n  const [searching, setSearching] = useState(false);\r\n  const [searchResults, setSearchResults] = useState<T[] | undefined>([]);\r\n\r\n  const [selectedOptions, setSelectedOptions] = useState<T[] | undefined>(\r\n    defaultValue\r\n  );\r\n\r\n  const selectableOptions = useMemo(() => {\r\n    const sourceOptions = onSearch && searchValue ? searchResults : options;\r\n    const selectableOptions =\r\n      sourceOptions?.filter(\r\n        (option) =>\r\n          !selectedOptions?.some(\r\n            (selected) => getKey(selected) === getKey(option)\r\n          )\r\n      ) || [];\r\n\r\n    if (!getGroup)\r\n      return { groupedOptions: { \"\": selectableOptions }, sortedTypes: [\"\"] };\r\n    const groupedOptions: Record<string, T[]> = {};\r\n    selectableOptions.forEach((option) => {\r\n      const type = getGroup(option);\r\n      if (!groupedOptions[type]) {\r\n        groupedOptions[type] = [];\r\n      }\r\n      groupedOptions[type].push(option);\r\n    });\r\n    const sortedTypes = Object.keys(groupedOptions).sort();\r\n\r\n    return { groupedOptions, sortedTypes };\r\n  }, [selectedOptions, searchResults, options, searchValue, getKey, getGroup]);\r\n\r\n  const toggleSelection = useCallback(\r\n    (option: T, isSelected: boolean) => {\r\n      // Prevent selection of disabled options\r\n      if (getDisabled?.(option)) return;\r\n\r\n      if (singular) {\r\n        const newSelection = isSelected ? [option] : [];\r\n        setSelectedOptions(newSelection);\r\n        onChange(newSelection);\r\n        setOpen(false);\r\n        return;\r\n      }\r\n      setSelectedOptions((prev) => {\r\n        const newSelection = isSelected\r\n          ? [...(prev || []), option]\r\n          : prev?.filter((item) => getKey(item) !== getKey(option)) || [];\r\n        onChange(newSelection);\r\n        return newSelection;\r\n      });\r\n    },\r\n    [singular, getKey, getDisabled, onChange]\r\n  );\r\n\r\n  const handleSearchChange = useCallback((search: string) => {\r\n    setSearching(!!search);\r\n    setSearchInput(search);\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    if (!onSearch) {\r\n      setSearching(false);\r\n      setSearchResults([]);\r\n      return;\r\n    }\r\n    if (searchValue !== searchInput) return;\r\n\r\n    setSearching(true);\r\n    setSearchResults([]);\r\n    onSearch(searchValue)\r\n      .then((fetchedOptions) => {\r\n        setSearchResults(fetchedOptions);\r\n      })\r\n      .finally(() => {\r\n        setSearching(false);\r\n      });\r\n  }, [onSearch, searchValue, searchInput]);\r\n\r\n  const onPopoverOpenChange = useCallback(\r\n    (isOpen: boolean) => {\r\n      if (disabled) return;\r\n      setOpen(isOpen);\r\n      setSearchInput(\"\");\r\n    },\r\n    [disabled]\r\n  );\r\n\r\n  const TriggerContent = (\r\n    <>\r\n      {selectedOptions?.length ? (\r\n        <div className={\"flex flex-wrap gap-1 overflow-hidden w-full\"}>\r\n          {!singleLine &&\r\n            selectedOptions.map((option) => {\r\n              const key = getKey(option);\r\n              const label = getLabel(option);\r\n              if (singular) {\r\n                return <Fragment key={key}>{label}</Fragment>;\r\n              }\r\n\r\n              return (\r\n                <Badge\r\n                  key={key}\r\n                  variant={\"secondary\"}\r\n                  className=\"hover:animate-pulse\"\r\n                  onClick={(e) => {\r\n                    if (disabled) return;\r\n                    e.stopPropagation();\r\n                    toggleSelection(option, false);\r\n                  }}\r\n                >\r\n                  {label}\r\n                  <XIcon className=\"size-4\" />\r\n                </Badge>\r\n              );\r\n            })}\r\n          {singleLine && (\r\n            <span className=\"truncate\">\r\n              {selectedOptions.map((option) => getLabel(option)).join(\", \")}\r\n            </span>\r\n          )}\r\n        </div>\r\n      ) : (\r\n        makeAChoiceText\r\n      )}\r\n      <ChevronsUpDown className=\"opacity-50\" />\r\n    </>\r\n  );\r\n  return (\r\n    <Popover open={open} onOpenChange={onPopoverOpenChange}>\r\n      <PopoverTrigger\r\n        id={id}\r\n        className={cn(\r\n          \"w-full justify-between h-max hover:bg-accent/30\",\r\n          className\r\n        )}\r\n        disabled={disabled}\r\n        asChild\r\n      >\r\n        {Trigger ? (\r\n          <span>\r\n            <Trigger disabled={disabled}>{TriggerContent}</Trigger>\r\n          </span>\r\n        ) : (\r\n          <Button variant=\"outline\" disabled={disabled}>\r\n            {TriggerContent}\r\n          </Button>\r\n        )}\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"p-0\">\r\n        <Command>\r\n          <CommandInput\r\n            placeholder={searchPlaceholderText}\r\n            className=\"h-9\"\r\n            onValueChange={(search) => handleSearchChange(search)}\r\n          />\r\n          <CommandList>\r\n            {searching && (\r\n              <div className=\"p-1 text-sm\">\r\n                <Skeleton className=\"h-7 w-full mb-1\" />\r\n                <Skeleton className=\"h-7 w-full mb-1\" />\r\n                <Skeleton className=\"h-7 w-full mb-1\" />\r\n              </div>\r\n            )}\r\n            {!searching && !!selectedOptions?.length && !singular && (\r\n              <Collapsible className=\"border-b\">\r\n                <CollapsibleTrigger asChild>\r\n                  <CommandGroup\r\n                    className=\"[&[data-state=open]_svg]:-rotate-90 cursor-pointer\"\r\n                    heading={\r\n                      <div className=\"flex justify-between\">\r\n                        {selectedText}\r\n                        <ChevronDown className=\"size-4 transition-all\" />\r\n                      </div>\r\n                    }\r\n                  />\r\n                </CollapsibleTrigger>\r\n                <CollapsibleContent className=\"px-1\">\r\n                  {selectedOptions.map((option) => {\r\n                    const key = getKey(option);\r\n                    const isDisabled = getDisabled?.(option) ?? false;\r\n                    return (\r\n                      <CommandItem\r\n                        id={\"option-\" + key}\r\n                        key={key}\r\n                        value={key}\r\n                        disabled={isDisabled}\r\n                        onSelect={() => toggleSelection(option, false)}\r\n                      >\r\n                        {renderOption ? (\r\n                          renderOption(option)\r\n                        ) : (\r\n                          <>\r\n                            {getLabel(option)}\r\n                            <Check className=\"ml-auto opacity-100\" />\r\n                          </>\r\n                        )}\r\n                      </CommandItem>\r\n                    );\r\n                  })}\r\n                </CollapsibleContent>\r\n              </Collapsible>\r\n            )}\r\n            {!searching && (\r\n              <CommandEmpty id=\"no-result-text\">\r\n                {onSearch && !options?.length && !searchValue\r\n                  ? typeToSearchText\r\n                  : noResult}\r\n              </CommandEmpty>\r\n            )}\r\n            {!searching &&\r\n              selectableOptions.sortedTypes?.map((group) => (\r\n                <CommandGroup key={group} heading={group}>\r\n                  {selectableOptions.groupedOptions[group]?.map((option) => {\r\n                    const key = getKey(option);\r\n                    const isDisabled = getDisabled?.(option) ?? false;\r\n                    return (\r\n                      <CommandItem\r\n                        id={\"option-\" + key}\r\n                        key={key}\r\n                        value={getLabel(option)}\r\n                        disabled={isDisabled}\r\n                        onSelect={() => toggleSelection(option, true)}\r\n                      >\r\n                        {getLabel(option)}\r\n                      </CommandItem>\r\n                    );\r\n                  })}\r\n                </CommandGroup>\r\n              ))}\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n"],"mappings":"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","names":["Fragment","selectableOptions"]}