@socprime/react-ui 0.0.7 → 0.0.9

package/README.md

@@ -125,7 +125,7 @@ Deep imports such as `@socprime/react-ui/dist/ui/Button` are blocked by the `exp
 `Aside`, `PageHeader`, `Tabs`, `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`, `AccordionSection`, `FolderTreeExpandTrigger`, `ScrollArea`, `ScrollBar`, `Separator`, `TreeGuide`, `TreeRow`
 
 **Feedback and state**
-`Spinner`, `SpinnerCustom`, `SpinnerSquare`, `AnimatedDots`, `Skeleton`, `ConditionalContent`
+`Spinner`, `SpinnerCustom`, `SpinnerSquare`, `AnimatedDots`, `Skeleton`, `Progress`, `ConditionalContent`
 
 **Theming**
 `ThemeToggle`, `applyTheme`, `useDocumentTheme`, `ThemeName`

package/index.d.ts

@@ -10,6 +10,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { Root, Item } from '@radix-ui/react-radio-group';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -450,6 +451,11 @@ type PaginationItemProps = ComponentProps<typeof PaginationItem>;
 type PaginationNextProps = ComponentProps<typeof PaginationNext>;
 type PaginationPreviousProps = ComponentProps<typeof PaginationPrevious>;
 
+interface ProgressProps extends React$1.ComponentProps<typeof ProgressPrimitive.Root> {
+    indicatorClassName?: string;
+}
+declare const Progress: React$1.FC<ProgressProps>;
+
 declare function RadioGroup({ className, ...props }: React$1.ComponentProps<typeof Root>): React$1.JSX.Element;
 declare function RadioGroupItem({ className, ...props }: React$1.ComponentProps<typeof Item>): React$1.JSX.Element;
 
@@ -555,6 +561,12 @@ interface SpinnerProps extends React.ComponentProps<'svg'> {
 declare const Spinner: React.FC<SpinnerProps>;
 declare const SpinnerCustom: React.FC<SpinnerProps>;
 
+interface SpinnerCircleProps extends React.ComponentProps<'svg'> {
+    size?: number;
+    strokeWidth?: number;
+}
+declare const SpinnerCircle: React.FC<SpinnerCircleProps>;
+
 type SpinnerSquareProps = {
     variant?: 'fixed' | 'absolute' | 'default';
 };
@@ -700,4 +712,4 @@ declare function TreeRow({ className, children, ...props }: ComponentProps<'div'
 type TreeGuideProps = ComponentProps<typeof TreeGuide>;
 type TreeRowProps = ComponentProps<typeof TreeRow>;
 
-export { Accordion, type AccordionChevronVariant, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSection, type AccordionSectionProps, AccordionTrigger, type AccordionTriggerProps, AnimatedDots, type AnimatedDotsProps, Aside, type AsideProps, type AsideTab, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, ConditionalContent, type ConditionalContentProps, ConfirmDeleteDialog, type ConfirmDeleteDialogProps, ConfirmDeleteDialog as ConfirmDialog, DefaultDialog, type DefaultDialogProps, DeleteButtonConfirm, type DeleteButtonConfirmProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuPortalProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, DropdownsCheckbox, type DropdownsCheckboxOption, type DropdownsCheckboxProps, DropdownsSelect, type DropdownsSelectOption, type DropdownsSelectProps, EmptyState, type EmptyStateProps, Field, FieldContent, type FieldContentProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, FieldTitle, type FieldTitleProps, FolderTreeExpandTrigger, type FolderTreeExpandTriggerProps, GroupHeaderRow, type GroupHeaderRowProps, HelperText, type HelperTextProps, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, LabelInfo, type LabelInfoProps, type LabelProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, PaginationWrap, type PaginationWrapProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollBar, SearchInput, SearchInputFields, type SearchInputFieldsProps, type SearchInputProps, Select, SelectContent, type SelectContentProps, SelectDefault, type SelectDefaultProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, ServerGroupedTableBody, type ServerGroupedTableBodyProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Slider, type SliderProps, SortableHeader, type SortableHeaderProps, Spinner, SpinnerCustom, type SpinnerProps, SpinnerSquare, type SpinnerSquareProps, type SuggestionOption, Suggestions, type SuggestionsProps, Switch, type SwitchProps, type TabItem, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, TextTruncate, type TextTruncateProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipParent, type TooltipParentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TreeGuide, type TreeGuideProps, TreeRow, type TreeRowProps, badgeVariants, buttonVariants };
+export { Accordion, type AccordionChevronVariant, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSection, type AccordionSectionProps, AccordionTrigger, type AccordionTriggerProps, AnimatedDots, type AnimatedDotsProps, Aside, type AsideProps, type AsideTab, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, ConditionalContent, type ConditionalContentProps, ConfirmDeleteDialog, type ConfirmDeleteDialogProps, ConfirmDeleteDialog as ConfirmDialog, DefaultDialog, type DefaultDialogProps, DeleteButtonConfirm, type DeleteButtonConfirmProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuPortalProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, DropdownsCheckbox, type DropdownsCheckboxOption, type DropdownsCheckboxProps, DropdownsSelect, type DropdownsSelectOption, type DropdownsSelectProps, EmptyState, type EmptyStateProps, Field, FieldContent, type FieldContentProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, FieldTitle, type FieldTitleProps, FolderTreeExpandTrigger, type FolderTreeExpandTriggerProps, GroupHeaderRow, type GroupHeaderRowProps, HelperText, type HelperTextProps, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, LabelInfo, type LabelInfoProps, type LabelProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, PaginationWrap, type PaginationWrapProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollBar, SearchInput, SearchInputFields, type SearchInputFieldsProps, type SearchInputProps, Select, SelectContent, type SelectContentProps, SelectDefault, type SelectDefaultProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, ServerGroupedTableBody, type ServerGroupedTableBodyProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Slider, type SliderProps, SortableHeader, type SortableHeaderProps, Spinner, SpinnerCircle, type SpinnerCircleProps, SpinnerCustom, type SpinnerProps, SpinnerSquare, type SpinnerSquareProps, type SuggestionOption, Suggestions, type SuggestionsProps, Switch, type SwitchProps, type TabItem, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, TextTruncate, type TextTruncateProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipParent, type TooltipParentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TreeGuide, type TreeGuideProps, TreeRow, type TreeRowProps, badgeVariants, buttonVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@socprime/react-ui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "SOC Prime React UI component library and Storybook design system.",
   "license": "MIT",
   "engines": {
@@ -92,6 +92,7 @@
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",

package/ui/Progress/Progress.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../../lib/cn.js";
+const Progress = ({
+  className,
+  value,
+  max = 100,
+  indicatorClassName,
+  ...props
+}) => {
+  const percentage = max > 0 ? Math.min(100, Math.max(0, (value ?? 0) / max * 100)) : 0;
+  return /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    {
+      "data-slot": "progress",
+      className: cn("bg-border relative h-1.5 w-full overflow-hidden rounded-full", className),
+      value,
+      max,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: cn("bg-btn-primary h-full w-full flex-1 transition-all", indicatorClassName),
+          style: { transform: `translateX(-${100 - percentage}%)` }
+        }
+      )
+    }
+  );
+};
+export {
+  Progress
+};

package/ui/Progress/index.js

@@ -0,0 +1,4 @@
+import { Progress } from "./Progress.js";
+export {
+  Progress
+};

package/ui/SpinnerCircle/SpinnerCircle.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const VIEWBOX = 16;
+const RADIUS = 6.5;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+const ARC_RATIO = 0.75;
+const SpinnerCircle = ({
+  className,
+  size = 12,
+  strokeWidth = 1.5,
+  ...props
+}) => {
+  const dash = CIRCUMFERENCE * ARC_RATIO;
+  const gap = CIRCUMFERENCE - dash;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      width: size,
+      height: size,
+      viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
+      fill: "none",
+      className: cn("shrink-0 animate-spin text-success", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: VIEWBOX / 2,
+          cy: VIEWBOX / 2,
+          r: RADIUS,
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeDasharray: `${dash} ${gap}`
+        }
+      )
+    }
+  );
+};
+export {
+  SpinnerCircle
+};

package/ui/SpinnerCircle/index.js

@@ -0,0 +1,4 @@
+import { SpinnerCircle } from "./SpinnerCircle.js";
+export {
+  SpinnerCircle
+};

package/ui/index.js

@@ -18,6 +18,7 @@ export * from "./Label/index.js";
 export * from "./MultiSelect/index.js";
 export * from "./PageHeader/index.js";
 export * from "./Pagination/index.js";
+export * from "./Progress/index.js";
 export * from "./RadioGroup/index.js";
 export * from "./ScrollArea/index.js";
 export * from "./SearchInput/index.js";
@@ -27,6 +28,7 @@ export * from "./Separator/index.js";
 export * from "./Skeleton/index.js";
 export * from "./Slider/index.js";
 export * from "./Spinner/index.js";
+export * from "./SpinnerCircle/index.js";
 export * from "./SpinnerSquare/index.js";
 export * from "./Suggestions/index.js";
 export * from "./Switch/index.js";