@segmentify/ui 0.0.59 → 0.0.61

package/dist/src/components/atoms/sortable-item.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface SortableItemProps {
+    id: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    handleClassName?: string;
+}
+export declare const SortableItem: ({ id, children, disabled, className, handleClassName }: SortableItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/molecules/sortable-list.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface SortableListProps {
+    itemIds: string[];
+    onReorder: (fromIndex: number, toIndex: number) => void;
+    children: React.ReactNode;
+    className?: string;
+    orientation?: 'vertical' | 'horizontal';
+}
+export declare const SortableList: ({ itemIds, onReorder, children, className, orientation, }: SortableListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/organisms/form-sortable-list.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { ArrayPath, FieldArrayWithId, FieldValues } from 'react-hook-form';
+export type FormSortableListProps<TFieldValues extends FieldValues = FieldValues, TName extends ArrayPath<TFieldValues> = ArrayPath<TFieldValues>> = {
+    name: TName;
+    renderItem: (field: FieldArrayWithId<TFieldValues, TName, 'id'>, index: number) => React.ReactNode;
+    label?: string;
+    description?: string;
+    containerClassName?: string;
+    listClassName?: string;
+    itemClassName?: string;
+    orientation?: 'vertical' | 'horizontal';
+    emptyState?: React.ReactNode;
+    isItemDisabled?: (field: FieldArrayWithId<TFieldValues, TName, 'id'>, index: number) => boolean;
+    hasRequiredIndicator?: boolean;
+};
+export declare const FormSortableList: <TFieldValues extends FieldValues = FieldValues, TName extends ArrayPath<TFieldValues> = ArrayPath<TFieldValues>>({ name, renderItem, label, description, containerClassName, listClassName, itemClassName, orientation, emptyState, isItemDisabled, hasRequiredIndicator, }: FormSortableListProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/index.d.ts

@@ -41,6 +41,7 @@ export { FormInput } from './components/organisms/form-input';
 export { FormPassword } from './components/organisms/form-password';
 export { FormRadio } from './components/organisms/form-radio';
 export { FormSlider } from './components/organisms/form-slider';
+export { FormSortableList } from './components/organisms/form-sortable-list';
 export { FormSwitch } from './components/organisms/form-switch';
 export { FormTextarea } from './components/organisms/form-textarea';
 export { FormPhoneInput } from './components/molecules/form-phone-input';
@@ -73,6 +74,8 @@ export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, } from './components/atoms/sidebar';
 export { Skeleton } from './components/atoms/skeleton';
 export { Slider } from './components/atoms/slider';
+export { SortableItem } from './components/atoms/sortable-item';
+export { SortableList } from './components/molecules/sortable-list';
 export { Toaster } from './components/atoms/sonner';
 export { toast } from 'sonner';
 export { Spinner } from './components/atoms/spinner';

package/dist/ui.css

@@ -304,6 +304,9 @@
 .ui\:row-start-1 {
   grid-row-start: 1;
 }
+.ui\:m-0 {
+  margin: calc(var(--ui-spacing) * 0);
+}
 .ui\:-mx-1 {
   margin-inline: calc(var(--ui-spacing) * -1);
 }
@@ -942,6 +945,9 @@
 .ui\:cursor-default {
   cursor: default;
 }
+.ui\:cursor-grab {
+  cursor: grab;
+}
 .ui\:cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -969,6 +975,9 @@
 .ui\:list-disc {
   list-style-type: disc;
 }
+.ui\:list-none {
+  list-style-type: none;
+}
 .ui\:appearance-none {
   appearance: none;
 }
@@ -2904,6 +2913,13 @@
     }
   }
 }
+.ui\:hover\:text-gray-600 {
+  &:hover {
+    @media (hover: hover) {
+      color: var(--ui-color-gray-600);
+    }
+  }
+}
 .ui\:hover\:text-green-600 {
   &:hover {
     @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segmentify/ui",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "description": "A collection of reusable React UI components built with Tailwind CSS and Radix UI",
   "repository": {
     "type": "git",
@@ -37,6 +37,9 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-avatar": "^1.1.11",
@@ -56,12 +59,12 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@segmentify/common": "0.0.3",
+    "@segmentify/common": "0.0.4",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "date-fns": "^4.2.1",
+    "date-fns": "^4.3.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
     "next-themes": "^0.4.6",
@@ -84,17 +87,18 @@
     "@storybook/react-vite": "^10.4.1",
     "@tailwindcss/cli": "^4.3.0",
     "@tailwindcss/vite": "^4.3.0",
-    "@tanstack/react-query": "^5.100.11",
+    "@tanstack/react-query": "^5.100.14",
     "@types/node": "^25.9.1",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^5.1.2",
     "@vitest/browser-playwright": "^4.1.7",
     "@vitest/coverage-v8": "^4.1.7",
     "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-boundaries": "^6.0.2",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-import-x": "^4.16.2",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.5",
@@ -110,7 +114,7 @@
     "prettier": "3.8.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-hook-form": "7.76.0",
+    "react-hook-form": "7.76.1",
     "recharts": "2.15.4",
     "sonner": "^2.0.7",
     "storybook": "^10.4.1",
@@ -119,7 +123,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.59.4",
-    "vite": "^8.0.14",
+    "vite": "^7.3.0",
     "vitest": "^4.1.7"
   },
   "lint-staged": {

package/dist/components/atoms/autocomplete.d.ts

@@ -1,13 +0,0 @@
-import { Autocomplete as AutocompletePrimitive } from '@base-ui/react';
-declare const Autocomplete: typeof AutocompletePrimitive.Root;
-declare function AutocompleteValue({ ...props }: AutocompletePrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
-declare function AutocompleteTrigger({ className, children, ...props }: AutocompletePrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
-declare function AutocompleteInput({ className, children, disabled, showTrigger, showClear, ...props }: AutocompletePrimitive.Input.Props & {
-    showTrigger?: boolean;
-    showClear?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function AutocompleteContent({ className, side, sideOffset, align, alignOffset, ...props }: AutocompletePrimitive.Popup.Props & Pick<AutocompletePrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset'>): import("react/jsx-runtime").JSX.Element;
-declare function AutocompleteList({ className, ...props }: AutocompletePrimitive.List.Props): import("react/jsx-runtime").JSX.Element;
-declare function AutocompleteItem({ className, children, ...props }: AutocompletePrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
-declare function AutocompleteEmpty({ className, ...props }: AutocompletePrimitive.Empty.Props): import("react/jsx-runtime").JSX.Element;
-export { Autocomplete, AutocompleteInput, AutocompleteContent, AutocompleteList, AutocompleteItem, AutocompleteEmpty, AutocompleteTrigger, AutocompleteValue, };

package/dist/components/atoms/iphone-15.d.ts

@@ -1,2 +0,0 @@
-import { type PropsWithChildren } from 'react';
-export declare const Iphone15: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/preview-single-button.d.ts

@@ -1,6 +0,0 @@
-import { type PropsWithChildren } from 'react';
-type PreviewSingleButtonProps = {
-    className?: string;
-};
-export declare const PreviewSingleButton: ({ children, className }: PropsWithChildren<PreviewSingleButtonProps>) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/molecules/async-combobox.d.ts

@@ -1,15 +0,0 @@
-export type AsyncComboboxItem = {
-    value: string;
-    label: string;
-};
-export type AsyncComboboxProps = {
-    selectedItem: AsyncComboboxItem;
-    fetchItems: (search: string, signal?: AbortSignal) => Promise<AsyncComboboxItem[]>;
-    onSelect: (item: AsyncComboboxItem) => void;
-    searchPlaceholder?: string;
-    placeholder?: string;
-    className?: string;
-    disabled?: boolean;
-    align?: 'start' | 'center' | 'end';
-};
-export declare function AsyncCombobox({ selectedItem, fetchItems: fetchItemsProp, searchPlaceholder, placeholder, className, disabled, align, onSelect, }: AsyncComboboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/autocomplete-field.d.ts

@@ -1,17 +0,0 @@
-export type AutocompleteFieldItem = {
-    value: string;
-    label: string;
-};
-type Props = {
-    items: AutocompleteFieldItem[];
-    value: string;
-    onValueChange: (value: string) => void;
-    label?: string;
-    disabled?: boolean;
-    placeholder?: string;
-    containerClassName?: string;
-    emptyMessage?: string;
-    onInputChange?: (value: string) => void;
-};
-export declare const AutocompleteField: ({ items, label, disabled, placeholder, containerClassName, emptyMessage, onInputChange, value, onValueChange, }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/molecules/confirmation-dialog.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import type { VariantProps } from 'class-variance-authority';
-import { buttonVariants } from '../../lib/design-variants';
-import type { Union } from 'ts-toolbelt';
-type BaseProps = {
-    title: string;
-    description: string;
-    onAction: () => void;
-    children?: React.ReactNode;
-    cancelLabel: string;
-    actionLabel: string;
-    actionVariant?: VariantProps<typeof buttonVariants>['variant'];
-};
-type ControlledProps = BaseProps & {
-    controlled: true;
-    open: boolean;
-    setOpen: (open: boolean) => void;
-};
-type UncontrolledProps = BaseProps & {
-    controlled?: false;
-};
-type Props = Union.Strict<ControlledProps | UncontrolledProps>;
-export declare const ConfirmationDialog: ({ title, description, onAction, children, cancelLabel, actionLabel, actionVariant, open, setOpen, controlled, }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/molecules/preview-sms.d.ts

@@ -1,5 +0,0 @@
-import { MessagingPhoneProps } from '../../types/messaging';
-export declare const PreviewSMS: {
-    ({ messageData }: MessagingPhoneProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};

package/dist/components/molecules/whatsapp-message.d.ts

@@ -1,15 +0,0 @@
-import { type PropsWithChildren } from 'react';
-type WhatsappMessageProps = {
-    cards?: {
-        image?: string;
-        title?: string;
-        content?: string;
-        buttons: {
-            text?: string;
-            yupButtonsText?: string;
-        }[];
-    }[];
-    includeTime?: boolean;
-};
-export declare const WhatsappMessage: ({ children, cards, includeTime }: PropsWithChildren<WhatsappMessageProps>) => import("react/jsx-runtime").JSX.Element;
-export {};