@pixpilot/shadcn-ui 0.0.4 → 0.0.6

package/dist/tags-input.d.cts

@@ -0,0 +1,60 @@
+import { CommandOptionListItem } from "./CommandOptionList.cjs";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+
+//#region src/tags-input.d.ts
+interface TagsInputProps {
+  value?: Array<string | number>;
+  onChange?: (value: Array<string | number>) => void;
+  options?: CommandOptionListItem[];
+  freeSolo?: boolean;
+  placeholder?: string;
+  emptyText?: string;
+  className?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  maxTags?: number;
+  allowDuplicates?: boolean;
+  editable?: boolean;
+  label?: string;
+  delimiter?: string;
+  addOnPaste?: boolean;
+  addOnTab?: boolean;
+  onValidate?: (value: string) => boolean;
+}
+/**
+ * TagsInput component - Inline tags input based on DiceUI
+ *
+ * This is a different implementation than TagsInput, using the DiceUI library
+ * for a more streamlined inline editing experience.
+ *
+ * Features:
+ * - Inline tag display and editing
+ * - Keyboard navigation (Arrow keys, Home, End, Delete, Backspace)
+ * - Optional tag editing (editable prop)
+ * - Validation support
+ * - Paste support with delimiter parsing
+ * - Max tags limit
+ * - Options support with dropdown (like Select)
+ * - freeSolo mode for custom tags (like MUI Autocomplete)
+ */
+declare function TagsInput({
+  value,
+  onChange,
+  options,
+  freeSolo,
+  placeholder,
+  emptyText,
+  className,
+  disabled,
+  readOnly,
+  maxTags,
+  allowDuplicates,
+  editable,
+  label,
+  delimiter,
+  addOnPaste,
+  addOnTab,
+  onValidate
+}: TagsInputProps): react_jsx_runtime6.JSX.Element;
+//#endregion
+export { TagsInput, TagsInputProps };

package/dist/tags-input.d.ts

@@ -0,0 +1,60 @@
+import { CommandOptionListItem } from "./CommandOptionList.js";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
+
+//#region src/tags-input.d.ts
+interface TagsInputProps {
+  value?: Array<string | number>;
+  onChange?: (value: Array<string | number>) => void;
+  options?: CommandOptionListItem[];
+  freeSolo?: boolean;
+  placeholder?: string;
+  emptyText?: string;
+  className?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  maxTags?: number;
+  allowDuplicates?: boolean;
+  editable?: boolean;
+  label?: string;
+  delimiter?: string;
+  addOnPaste?: boolean;
+  addOnTab?: boolean;
+  onValidate?: (value: string) => boolean;
+}
+/**
+ * TagsInput component - Inline tags input based on DiceUI
+ *
+ * This is a different implementation than TagsInput, using the DiceUI library
+ * for a more streamlined inline editing experience.
+ *
+ * Features:
+ * - Inline tag display and editing
+ * - Keyboard navigation (Arrow keys, Home, End, Delete, Backspace)
+ * - Optional tag editing (editable prop)
+ * - Validation support
+ * - Paste support with delimiter parsing
+ * - Max tags limit
+ * - Options support with dropdown (like Select)
+ * - freeSolo mode for custom tags (like MUI Autocomplete)
+ */
+declare function TagsInput({
+  value,
+  onChange,
+  options,
+  freeSolo,
+  placeholder,
+  emptyText,
+  className,
+  disabled,
+  readOnly,
+  maxTags,
+  allowDuplicates,
+  editable,
+  label,
+  delimiter,
+  addOnPaste,
+  addOnTab,
+  onValidate
+}: TagsInputProps): react_jsx_runtime5.JSX.Element;
+//#endregion
+export { TagsInput, TagsInputProps };

package/dist/tags-input.js

@@ -0,0 +1 @@
+"use client";import{CommandOptionList as e}from"./CommandOptionList.js";import{Command as t,Popover as n,PopoverContent as r,PopoverTrigger as i,TagsInputInLineClear as a,TagsInputInLineInput as o,TagsInputInLineItem as s,TagsInputInLineLabel as c,TagsInputInLineList as l,TagsInputInLineRoot as u,cn as d}from"@pixpilot/shadcn";import{useCallback as f,useEffect as p,useMemo as m,useRef as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";const y=[],b=[];function x({value:x=y,onChange:S,options:C=b,freeSolo:w=!0,placeholder:T=`Add tags...`,emptyText:E=`No options found.`,className:D,disabled:O=!1,readOnly:k=!1,maxTags:A,allowDuplicates:j=!1,editable:M=!1,label:N,delimiter:P=`,`,addOnPaste:F=!0,addOnTab:I=!0,onValidate:L}){let[R,z]=g(!1),[B,V]=g(``),H=h(null),U=C.length>0;p(()=>{if(R&&H.current){let e=setTimeout(()=>{H.current?.focus()},0);return()=>{clearTimeout(e)}}},[R]);let W=m(()=>x.map(e=>String(e)),[x]),G=f(e=>U?C.find(t=>String(t.value)===String(e))?.label??String(e):String(e),[C,U]),K=m(()=>U?C.filter(e=>B?e.label.toLowerCase().includes(B.toLowerCase()):!0):[],[C,B,U]),q=f(e=>{if(V(``),U){let t=e.map(e=>C.find(t=>String(t.value)===e)?.value??e);S?.(t)}else S?.(e)},[S,C,U]),J=f(e=>A!==void 0&&x.length>=A||!j&&W.includes(e)||U&&!w&&!C.some(t=>String(t.value)===e)?!1:L?L(e):!0,[x,A,j,L,W,U,w,C]),Y=f(e=>{let t=x.some(t=>String(t)===String(e)),n;n=t?x.filter(t=>String(t)!==String(e)):[...x,e],S?.(n),V(``)},[x,S]);return U?v(`div`,{className:d(`relative`,D),children:[N!==void 0&&N!==``?_(c,{children:N}):null,v(n,{open:R&&!O&&!k,onOpenChange:z,children:[_(i,{asChild:!0,children:_(`div`,{className:`w-full`,children:v(u,{disabled:O,editable:M,max:A,onValueChange:q,onValidate:J,readOnly:k,value:W,delimiter:w?P:void 0,addOnPaste:w?F:!1,addOnTab:w?I:!1,children:[v(l,{onClick:e=>{!O&&!k&&(e.stopPropagation(),z(!0))},children:[x.map(e=>{let t=G(e);return _(s,{value:String(e),children:t},String(e))}),_(o,{ref:H,placeholder:T,onFocus:e=>{e.stopPropagation(),z(!0)},onChange:e=>{e.stopPropagation(),V(e.target.value)},onKeyDown:e=>{if(R&&(e.key===`ArrowDown`||e.key===`ArrowUp`)){e.preventDefault(),e.stopPropagation();let t=document.querySelector(`[cmdk-root]`);if(t){let n=new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0});t.dispatchEvent(n)}return}if(R&&e.key===`Enter`){let t=document.querySelector(`[cmdk-item][data-selected="true"]`);if(t){e.preventDefault(),e.stopPropagation(),t.click();return}}e.stopPropagation()},onMouseDown:e=>{e.stopPropagation()}})]}),x.length>0&&!O&&!k&&_(a,{})]})})}),_(r,{className:`p-0`,align:`start`,style:{width:`var(--radix-popover-trigger-width)`},onOpenAutoFocus:e=>{e.preventDefault()},children:_(t,{shouldFilter:!1,value:B,loop:!0,children:_(e,{options:K,value:x,onChange:Y,emptyText:E})})})]})]}):v(u,{className:D,disabled:O,editable:M,max:A,onValueChange:q,onValidate:J,readOnly:k,value:W,delimiter:P,addOnPaste:F,addOnTab:I,children:[N!==void 0&&N!==``?_(c,{children:N}):null,v(l,{children:[W.map(e=>_(s,{value:e,children:e},e)),_(o,{placeholder:T})]}),x.length>0&&!O&&!k&&_(a,{})]})}export{x as TagsInput};

package/dist/theme-provider/ThemeProvider.cjs

@@ -0,0 +1 @@
+"use client";const e=require(`../_virtual/rolldown_runtime.cjs`);let t=require(`react`);t=e.__toESM(t);let n=require(`react/jsx-runtime`);n=e.__toESM(n);let r=require(`next-themes`);r=e.__toESM(r);const i=e=>{let{children:t}=e;return(0,n.jsx)(r.ThemeProvider,{attribute:`class`,defaultTheme:`system`,enableSystem:!0,disableTransitionOnChange:!1,...e,children:t})};i.displayName=`ThemeProvider`,exports.ThemeProvider=i;

package/dist/theme-provider/ThemeProvider.d.cts

@@ -0,0 +1,16 @@
+import React, { ComponentProps } from "react";
+import { ThemeProvider } from "next-themes";
+
+//#region src/theme-provider/ThemeProvider.d.ts
+
+/**
+ * Note: In Chrome extensions, a flicker (Flash of Wrong Theme, or FOWT) may occur on page load
+ * during development mode. This is resolved in production builds where scripts are included
+ * in the HTML head to apply the theme before content renders. Do not attempt to fix this in dev.
+ */
+interface ThemeProviderProps extends ComponentProps<typeof ThemeProvider> {
+  children: React.ReactNode;
+}
+declare const ThemeProvider$1: React.FC<ThemeProviderProps>;
+//#endregion
+export { ThemeProvider$1 as ThemeProvider, ThemeProviderProps };

package/dist/theme-provider/ThemeProvider.d.ts

@@ -0,0 +1,16 @@
+import React, { ComponentProps } from "react";
+import { ThemeProvider } from "next-themes";
+
+//#region src/theme-provider/ThemeProvider.d.ts
+
+/**
+ * Note: In Chrome extensions, a flicker (Flash of Wrong Theme, or FOWT) may occur on page load
+ * during development mode. This is resolved in production builds where scripts are included
+ * in the HTML head to apply the theme before content renders. Do not attempt to fix this in dev.
+ */
+interface ThemeProviderProps extends ComponentProps<typeof ThemeProvider> {
+  children: React.ReactNode;
+}
+declare const ThemeProvider$1: React.FC<ThemeProviderProps>;
+//#endregion
+export { ThemeProvider$1 as ThemeProvider, ThemeProviderProps };

package/dist/theme-provider/ThemeProvider.js

@@ -0,0 +1 @@
+"use client";import e from"react";import{jsx as t}from"react/jsx-runtime";import{ThemeProvider as n}from"next-themes";const r=e=>{let{children:r}=e;return t(n,{attribute:`class`,defaultTheme:`system`,enableSystem:!0,disableTransitionOnChange:!1,...e,children:r})};r.displayName=`ThemeProvider`;export{r as ThemeProvider};

package/dist/theme-provider/index.cjs

@@ -0,0 +1 @@
+const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./ThemeProvider.cjs`);let n=require(`next-themes`);n=e.__toESM(n);

package/dist/theme-provider/index.d.cts

@@ -0,0 +1,3 @@
+import { ThemeProvider as ThemeProvider$1, ThemeProviderProps } from "./ThemeProvider.cjs";
+import { useTheme } from "next-themes";
+export { useTheme };

package/dist/theme-provider/index.d.ts

@@ -0,0 +1,3 @@
+import { ThemeProvider as ThemeProvider$1, ThemeProviderProps } from "./ThemeProvider.js";
+import { useTheme as useTheme$1 } from "next-themes";
+export { useTheme$1 as useTheme };

package/dist/theme-provider/index.js

@@ -0,0 +1 @@
+import{ThemeProvider as e}from"./ThemeProvider.js";import{useTheme as t}from"next-themes";export{t as useTheme};

package/dist/toast/AlertToast.cjs

@@ -0,0 +1 @@
+const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`../Alert.cjs`);let n=require(`@pixpilot/shadcn`);n=e.__toESM(n);let r=require(`react`);r=e.__toESM(r);let i=require(`react/jsx-runtime`);i=e.__toESM(i);let a=require(`lucide-react`);a=e.__toESM(a);const o=e=>{let{duration:r,onClose:o,...s}=e;return(0,i.jsx)(t.Alert,{icon:!0,...s,className:(0,n.cn)(`shadow-md`,e.className,{"pr-3":o}),children:o&&(0,i.jsx)(`div`,{className:`flex items-start pt-0.5 pl-1`,children:(0,i.jsxs)(`button`,{type:`button`,className:`cursor-pointer opacity-80 transition-opacity hover:opacity-100`,onClick:o,children:[(0,i.jsx)(a.XIcon,{className:`size-4.5`}),(0,i.jsx)(`span`,{className:`sr-only`,children:`Close`})]})})})};o.displayName=`AlertToast`,exports.AlertToast=o;

package/dist/toast/AlertToast.d.cts

@@ -0,0 +1,9 @@
+import { AlertProps } from "../Alert.cjs";
+import React from "react";
+
+//#region src/toast/AlertToast.d.ts
+interface AlertToastProps extends AlertProps {
+  onClose?: () => void;
+}
+//#endregion
+export { AlertToastProps };

package/dist/toast/AlertToast.d.ts

@@ -0,0 +1,9 @@
+import { AlertProps } from "../Alert.js";
+import React from "react";
+
+//#region src/toast/AlertToast.d.ts
+interface AlertToastProps extends AlertProps {
+  onClose?: () => void;
+}
+//#endregion
+export { AlertToastProps };

package/dist/toast/AlertToast.js

@@ -0,0 +1 @@
+import{Alert as e}from"../Alert.js";import{cn as t}from"@pixpilot/shadcn";import n from"react";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{XIcon as a}from"lucide-react";const o=n=>{let{duration:o,onClose:s,...c}=n;return r(e,{icon:!0,...c,className:t(`shadow-md`,n.className,{"pr-3":s}),children:s&&r(`div`,{className:`flex items-start pt-0.5 pl-1`,children:i(`button`,{type:`button`,className:`cursor-pointer opacity-80 transition-opacity hover:opacity-100`,onClick:s,children:[r(a,{className:`size-4.5`}),r(`span`,{className:`sr-only`,children:`Close`})]})})})};o.displayName=`AlertToast`;export{o as AlertToast};

package/dist/toast/index.cjs

@@ -0,0 +1 @@
+const e=require(`./toast.cjs`);

package/dist/toast/index.d.cts

@@ -0,0 +1 @@
+import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast.cjs";

package/dist/toast/index.d.ts

@@ -0,0 +1 @@
+import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast.js";

package/dist/toast/index.js

@@ -0,0 +1 @@
+import{DEFAULT_ALERT_DURATION as e,toast as t,toastError as n,toastInfo as r,toastSuccess as i,toastWarning as a}from"./toast.js";

package/dist/toast/toast.cjs

@@ -0,0 +1 @@
+const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./AlertToast.cjs`);let n=require(`react/jsx-runtime`);n=e.__toESM(n);let r=require(`@pixpilot/hash`);r=e.__toESM(r);let i=require(`sonner`);i=e.__toESM(i);const a=1e4,o=new Map;function s(e){let{duration:s,...c}=e,l=`toast_${(0,r.simpleHash)(`${e.title??``}::${e.description??``}`)}`,u=o.get(l);u?(i.toast.dismiss(u.currentId),u.counter+=1,u.currentId=`${l}_${u.counter}`):o.set(l,{currentId:`${l}_0`,counter:0});let d=o.get(l).currentId,f=e=>{let t=o.get(l);t&&t.currentId===e&&o.delete(l)};i.toast.custom(e=>(0,n.jsx)(t.AlertToast,{...c,onClose:()=>i.toast.dismiss(e)}),{duration:s??a,id:d,onDismiss:e=>{f(e.id)},onAutoClose(e){f(e.id)}})}function c(e,t,n){s(typeof t==`string`?{variant:e,description:t,duration:n}:{variant:e,...t,duration:n})}function l(e,t){c(`info`,e,t)}function u(e,t){c(`success`,e,t)}function d(e,t){c(`warning`,e,t)}function f(e,t){c(`error`,e,t)}exports.DEFAULT_ALERT_DURATION=a,exports.toast=s,exports.toastError=f,exports.toastInfo=l,exports.toastSuccess=u,exports.toastWarning=d;

package/dist/toast/toast.d.cts

@@ -0,0 +1,20 @@
+import { AlertBaseProps } from "../Alert.cjs";
+import { AlertToastProps } from "./AlertToast.cjs";
+import "../index.cjs";
+
+//#region src/toast/toast.d.ts
+declare const DEFAULT_ALERT_DURATION = 10000;
+interface ToastProps extends AlertBaseProps {
+  duration?: number;
+}
+declare function toast(props: ToastProps): void;
+type ToastMessage = string | ({
+  title: string;
+  description: string;
+} & AlertToastProps);
+declare function toastInfo(message: ToastMessage, duration?: number): void;
+declare function toastSuccess(message: ToastMessage, duration?: number): void;
+declare function toastWarning(message: ToastMessage, duration?: number): void;
+declare function toastError(message: ToastMessage, duration?: number): void;
+//#endregion
+export { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning };

package/dist/toast/toast.d.ts

@@ -0,0 +1,20 @@
+import { AlertBaseProps } from "../Alert.js";
+import { AlertToastProps } from "./AlertToast.js";
+import "../index.js";
+
+//#region src/toast/toast.d.ts
+declare const DEFAULT_ALERT_DURATION = 10000;
+interface ToastProps extends AlertBaseProps {
+  duration?: number;
+}
+declare function toast(props: ToastProps): void;
+type ToastMessage = string | ({
+  title: string;
+  description: string;
+} & AlertToastProps);
+declare function toastInfo(message: ToastMessage, duration?: number): void;
+declare function toastSuccess(message: ToastMessage, duration?: number): void;
+declare function toastWarning(message: ToastMessage, duration?: number): void;
+declare function toastError(message: ToastMessage, duration?: number): void;
+//#endregion
+export { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning };

package/dist/toast/toast.js

@@ -0,0 +1 @@
+import{AlertToast as e}from"./AlertToast.js";import{jsx as t}from"react/jsx-runtime";import{simpleHash as n}from"@pixpilot/hash";import{toast as r}from"sonner";const i=1e4,a=new Map;function o(o){let{duration:s,...c}=o,l=`toast_${n(`${o.title??``}::${o.description??``}`)}`,u=a.get(l);u?(r.dismiss(u.currentId),u.counter+=1,u.currentId=`${l}_${u.counter}`):a.set(l,{currentId:`${l}_0`,counter:0});let d=a.get(l).currentId,f=e=>{let t=a.get(l);t&&t.currentId===e&&a.delete(l)};r.custom(n=>t(e,{...c,onClose:()=>r.dismiss(n)}),{duration:s??i,id:d,onDismiss:e=>{f(e.id)},onAutoClose(e){f(e.id)}})}function s(e,t,n){o(typeof t==`string`?{variant:e,description:t,duration:n}:{variant:e,...t,duration:n})}function c(e,t){s(`info`,e,t)}function l(e,t){s(`success`,e,t)}function u(e,t){s(`warning`,e,t)}function d(e,t){s(`error`,e,t)}export{i as DEFAULT_ALERT_DURATION,o as toast,d as toastError,c as toastInfo,l as toastSuccess,u as toastWarning};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "lucide-react": "0.553.0",
     "next-themes": "0.4.6",
     "sonner": "2.0.7",
-    "@pixpilot/shadcn": "0.1.8"
+    "@pixpilot/shadcn": "0.1.10"
   },
   "devDependencies": {
     "@storybook/react": "^8.5.3",
@@ -46,11 +46,11 @@
     "react-dom": "19.2.0",
     "tsdown": "^0.15.8",
     "typescript": "^5.9.3",
-    "@internal/tsconfig": "0.1.0",
-    "@internal/prettier-config": "0.0.1",
-    "@internal/vitest-config": "0.1.0",
+    "@internal/eslint-config": "0.3.0",
     "@internal/tsdown-config": "0.1.0",
-    "@internal/eslint-config": "0.3.0"
+    "@internal/prettier-config": "0.0.1",
+    "@internal/tsconfig": "0.1.0",
+    "@internal/vitest-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",
   "scripts": {