@segmentify/ui 0.0.60 → 0.0.62

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

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

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

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

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { ArrayPath, FieldArrayWithId, FieldValues } from 'react-hook-form';
+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;
+export {};

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.60",
+  "version": "0.0.62",
   "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",
@@ -96,6 +99,7 @@
     "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",
     "eslint-plugin-react-hooks": "^7.1.1",

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/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 {};

package/dist/components/organisms/form-checkbox.d.ts

@@ -1,10 +0,0 @@
-import { type Control, type FieldValues, type Path } from 'react-hook-form';
-type FormCheckboxProps<TFieldValues extends FieldValues = FieldValues> = {
-    name: Path<TFieldValues>;
-    control?: Control<TFieldValues>;
-    label: string;
-    formClassName?: string;
-    containerClassName?: string;
-};
-export declare const FormCheckbox: <TFieldValues extends FieldValues = FieldValues>({ name, control, formClassName, ...props }: FormCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-export {};