@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/progress-bar/progress-bar.js

@@ -0,0 +1,108 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { ProgressBar } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { progressBarVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ProgressBarContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ProgressBar Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ProgressBarRoot = ({
+  children,
+  className,
+  color,
+  size,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => progressBarVariants({
+    color,
+    size
+  }), [color, size]);
+  return /*#__PURE__*/jsx(ProgressBar, {
+    "data-slot": "progress-bar",
+    ...props,
+    className: composeTwRenderProps(className, slots.base()),
+    children: values => /*#__PURE__*/jsx(ProgressBarContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+ProgressBarRoot.displayName = "Cognitiv.ProgressBar";
+
+/* -------------------------------------------------------------------------------------------------
+ * ProgressBar Output
+ * -----------------------------------------------------------------------------------------------*/
+
+const ProgressBarOutput = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(ProgressBarContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.output, className),
+    "data-slot": "progress-bar-output",
+    ...props,
+    children: children ?? state?.valueText
+  });
+};
+ProgressBarOutput.displayName = "Cognitiv.ProgressBar.Output";
+
+/* -------------------------------------------------------------------------------------------------
+ * ProgressBar Track
+ * -----------------------------------------------------------------------------------------------*/
+
+const ProgressBarTrack = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ProgressBarContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.track, className),
+    "data-slot": "progress-bar-track",
+    ...props,
+    children: children
+  });
+};
+ProgressBarTrack.displayName = "Cognitiv.ProgressBar.Track";
+
+/* -------------------------------------------------------------------------------------------------
+ * ProgressBar Fill
+ * -----------------------------------------------------------------------------------------------*/
+
+const ProgressBarFill = ({
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(ProgressBarContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.fill, className),
+    "data-slot": "progress-bar-fill",
+    style: {
+      ...style,
+      width: state?.isIndeterminate ? undefined : `${state?.percentage ?? 0}%`
+    },
+    ...props
+  });
+};
+ProgressBarFill.displayName = "Cognitiv.ProgressBar.Fill";
+
+export { ProgressBarFill, ProgressBarOutput, ProgressBarRoot, ProgressBarTrack };

package/dist/components/progress-bar/styles.d.ts

@@ -0,0 +1,105 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const progressBarVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, undefined, {
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ProgressBarVariants = VariantProps<typeof progressBarVariants>;

package/dist/components/progress-bar/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const progressBarVariants = tv({
+  defaultVariants: {
+    color: "accent",
+    size: "md"
+  },
+  slots: {
+    base: "progress-bar",
+    fill: "progress-bar__fill",
+    output: "progress-bar__output",
+    track: "progress-bar__track"
+  },
+  variants: {
+    color: {
+      accent: {
+        base: "progress-bar--accent"
+      },
+      danger: {
+        base: "progress-bar--danger"
+      },
+      default: {
+        base: "progress-bar--default"
+      },
+      success: {
+        base: "progress-bar--success"
+      },
+      warning: {
+        base: "progress-bar--warning"
+      }
+    },
+    size: {
+      lg: {
+        base: "progress-bar--lg"
+      },
+      md: {
+        base: "progress-bar--md"
+      },
+      sm: {
+        base: "progress-bar--sm"
+      }
+    }
+  }
+});
+
+export { progressBarVariants };

package/dist/components/progress-circle/index.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentProps } from "react";
+import { ProgressCircleFillCircle, ProgressCircleRoot, ProgressCircleTrack, ProgressCircleTrackCircle } from "./progress-circle";
+export declare const ProgressCircle: {
+    ({ children, className, color, size, ...props }: import("./progress-circle").ProgressCircleRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    FillCircle: {
+        ({ className, ...props }: import("./progress-circle").ProgressCircleFillCircleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Root: {
+        ({ children, className, color, size, ...props }: import("./progress-circle").ProgressCircleRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Track: {
+        ({ children, className, ...props }: import("./progress-circle").ProgressCircleTrackProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    TrackCircle: {
+        ({ className, ...props }: import("./progress-circle").ProgressCircleTrackCircleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type ProgressCircle = {
+    Props: ComponentProps<typeof ProgressCircleRoot>;
+    RootProps: ComponentProps<typeof ProgressCircleRoot>;
+    TrackProps: ComponentProps<typeof ProgressCircleTrack>;
+    TrackCircleProps: ComponentProps<typeof ProgressCircleTrackCircle>;
+    FillCircleProps: ComponentProps<typeof ProgressCircleFillCircle>;
+};
+export { ProgressCircleRoot, ProgressCircleTrack, ProgressCircleTrackCircle, ProgressCircleFillCircle, };
+export type { ProgressCircleRootProps, ProgressCircleRootProps as ProgressCircleProps, ProgressCircleTrackProps, ProgressCircleTrackCircleProps, ProgressCircleFillCircleProps, } from "./progress-circle";
+export { progressCircleVariants } from "./styles";
+export type { ProgressCircleVariants } from "./styles";

package/dist/components/progress-circle/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { ProgressCircleRoot, ProgressCircleTrackCircle, ProgressCircleTrack, ProgressCircleFillCircle } from './progress-circle.js';
+export { progressCircleVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ProgressCircle = Object.assign(ProgressCircleRoot, {
+  FillCircle: ProgressCircleFillCircle,
+  Root: ProgressCircleRoot,
+  Track: ProgressCircleTrack,
+  TrackCircle: ProgressCircleTrackCircle
+});
+
+export { ProgressCircle, ProgressCircleFillCircle, ProgressCircleRoot, ProgressCircleTrack, ProgressCircleTrackCircle };

package/dist/components/progress-circle/progress-circle.d.ts

@@ -0,0 +1,29 @@
+import type { ProgressCircleVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { ProgressBar as ProgressBarPrimitive } from "react-aria-components";
+interface ProgressCircleRootProps extends ComponentPropsWithRef<typeof ProgressBarPrimitive>, ProgressCircleVariants {
+}
+declare const ProgressCircleRoot: {
+    ({ children, className, color, size, ...props }: ProgressCircleRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ProgressCircleTrackProps extends ComponentPropsWithRef<"svg"> {
+}
+declare const ProgressCircleTrack: {
+    ({ children, className, ...props }: ProgressCircleTrackProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ProgressCircleTrackCircleProps extends ComponentPropsWithRef<"circle"> {
+}
+declare const ProgressCircleTrackCircle: {
+    ({ className, ...props }: ProgressCircleTrackCircleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ProgressCircleFillCircleProps extends ComponentPropsWithRef<"circle"> {
+}
+declare const ProgressCircleFillCircle: {
+    ({ className, ...props }: ProgressCircleFillCircleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ProgressCircleRoot, ProgressCircleTrack, ProgressCircleTrackCircle, ProgressCircleFillCircle, };
+export type { ProgressCircleRootProps, ProgressCircleTrackProps, ProgressCircleTrackCircleProps, ProgressCircleFillCircleProps, };

package/dist/components/progress-circle/progress-circle.js

@@ -0,0 +1,126 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { ProgressBar } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { progressCircleVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const STROKE_WIDTH = 4;
+const CENTER = 18;
+const RADIUS = CENTER - STROKE_WIDTH / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+/* -------------------------------------------------------------------------------------------------
+ * ProgressCircle Context
+ * -----------------------------------------------------------------------------------------------*/
+
+const ProgressCircleContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ProgressCircle Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ProgressCircleRoot = ({
+  children,
+  className,
+  color,
+  size,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => progressCircleVariants({
+    color,
+    size
+  }), [color, size]);
+  return /*#__PURE__*/jsx(ProgressBar, {
+    "data-slot": "progress-circle",
+    ...props,
+    className: composeTwRenderProps(className, slots.base()),
+    children: values => /*#__PURE__*/jsx(ProgressCircleContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+ProgressCircleRoot.displayName = "Cognitiv.ProgressCircle";
+
+/* -------------------------------------------------------------------------------------------------
+ * ProgressCircle Track
+ * -----------------------------------------------------------------------------------------------*/
+
+const ProgressCircleTrack = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ProgressCircleContext);
+  return /*#__PURE__*/jsx("svg", {
+    className: composeSlotClassName(slots?.track, className),
+    "data-slot": "progress-circle-track",
+    fill: "none",
+    viewBox: `0 0 ${CENTER * 2} ${CENTER * 2}`,
+    ...props,
+    children: children
+  });
+};
+ProgressCircleTrack.displayName = "Cognitiv.ProgressCircle.Track";
+
+/* -------------------------------------------------------------------------------------------------
+ * ProgressCircle TrackCircle
+ * -----------------------------------------------------------------------------------------------*/
+
+const ProgressCircleTrackCircle = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ProgressCircleContext);
+  return /*#__PURE__*/jsx("circle", {
+    className: composeSlotClassName(slots?.trackCircle, className),
+    cx: CENTER,
+    cy: CENTER,
+    "data-slot": "progress-circle-track-circle",
+    r: RADIUS,
+    strokeWidth: STROKE_WIDTH,
+    ...props
+  });
+};
+ProgressCircleTrackCircle.displayName = "Cognitiv.ProgressCircle.TrackCircle";
+
+/* -------------------------------------------------------------------------------------------------
+ * ProgressCircle FillCircle
+ * -----------------------------------------------------------------------------------------------*/
+
+const ProgressCircleFillCircle = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(ProgressCircleContext);
+  const percentage = state?.percentage ?? 0;
+  const isIndeterminate = state?.isIndeterminate ?? false;
+  const strokeDashoffset = CIRCUMFERENCE - percentage / 100 * CIRCUMFERENCE;
+  return /*#__PURE__*/jsx("circle", {
+    className: composeSlotClassName(slots?.fillCircle, className),
+    cx: CENTER,
+    cy: CENTER,
+    "data-slot": "progress-circle-fill-circle",
+    r: RADIUS,
+    strokeDasharray: CIRCUMFERENCE,
+    strokeDashoffset: isIndeterminate ? CIRCUMFERENCE * 0.75 : strokeDashoffset,
+    strokeLinecap: "round",
+    strokeWidth: STROKE_WIDTH,
+    transform: `rotate(-90 ${CENTER} ${CENTER})`,
+    ...props
+  });
+};
+ProgressCircleFillCircle.displayName = "Cognitiv.ProgressCircle.FillCircle";
+
+export { ProgressCircleFillCircle, ProgressCircleRoot, ProgressCircleTrack, ProgressCircleTrackCircle };

package/dist/components/progress-circle/styles.d.ts

@@ -0,0 +1,105 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const progressCircleVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fillCircle: string;
+    track: string;
+    trackCircle: string;
+}, undefined, {
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fillCircle: string;
+    track: string;
+    trackCircle: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fillCircle: string;
+    track: string;
+    trackCircle: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ProgressCircleVariants = VariantProps<typeof progressCircleVariants>;

package/dist/components/progress-circle/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const progressCircleVariants = tv({
+  defaultVariants: {
+    color: "accent",
+    size: "md"
+  },
+  slots: {
+    base: "progress-circle",
+    fillCircle: "progress-circle__fill-circle",
+    track: "progress-circle__track",
+    trackCircle: "progress-circle__track-circle"
+  },
+  variants: {
+    color: {
+      accent: {
+        base: "progress-circle--accent"
+      },
+      danger: {
+        base: "progress-circle--danger"
+      },
+      default: {
+        base: "progress-circle--default"
+      },
+      success: {
+        base: "progress-circle--success"
+      },
+      warning: {
+        base: "progress-circle--warning"
+      }
+    },
+    size: {
+      lg: {
+        base: "progress-circle--lg"
+      },
+      md: {
+        base: "progress-circle--md"
+      },
+      sm: {
+        base: "progress-circle--sm"
+      }
+    }
+  }
+});
+
+export { progressCircleVariants };

package/dist/components/rac/components.d.ts

@@ -0,0 +1 @@
+export { Collection, ListBoxLoadMoreItem, RouterProvider } from "react-aria-components";

package/dist/components/rac/index.d.ts

@@ -0,0 +1,4 @@
+export { useFilter, Virtualizer, TableLayout, ListLayout } from "react-aria-components";
+export { Collection, ListBoxLoadMoreItem, RouterProvider } from "./components";
+export { parseColor } from "./utils";
+export type { Key, Orientation, PressEvent, PointerType, KeyboardEvent, HoverEvent, Selection, TimeValue, DateValue, DateRange, ValidationResult, RangeValue, RouterConfig, Color, ColorFormat, ColorSpace, ColorChannel, ColorChannelRange, ColorAxes, SortDescriptor, } from "./types";

package/dist/components/rac/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { Collection, ListBoxLoadMoreItem, ListLayout, RouterProvider, TableLayout, Virtualizer, parseColor, useFilter } from 'react-aria-components';

package/dist/components/rac/types.d.ts

@@ -0,0 +1,3 @@
+export type { Key, Orientation, PressEvent, PointerType, KeyboardEvent, HoverEvent, Selection, RangeValue, ValidationResult, RouterConfig, } from "@react-types/shared";
+export type { TimeValue, DateValue, DateRange, SortDescriptor } from "react-aria-components";
+export type { Color, ColorFormat, ColorSpace, ColorChannel, ColorChannelRange, ColorAxes, } from "@react-types/color";

package/dist/components/rac/utils.d.ts

@@ -0,0 +1 @@
+export { parseColor } from "react-aria-components";

package/dist/components/radio/index.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { RadioContent, RadioControl, RadioIndicator, RadioRoot } from "./radio";
+export declare const Radio: (({ children, className, ...props }: import("./radio").RadioRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Content: ({ children, className, ...props }: import("./radio").RadioContentProps) => import("react/jsx-runtime").JSX.Element;
+    Control: ({ children, className, ...props }: import("./radio").RadioControlProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...props }: import("./radio").RadioIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, ...props }: import("./radio").RadioRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Radio = {
+    Props: ComponentProps<typeof RadioRoot>;
+    RootProps: ComponentProps<typeof RadioRoot>;
+    ControlProps: ComponentProps<typeof RadioControl>;
+    IndicatorProps: ComponentProps<typeof RadioIndicator>;
+    ContentProps: ComponentProps<typeof RadioContent>;
+};
+export { RadioContent, RadioControl, RadioIndicator, RadioRoot };
+export type { RadioRootProps, RadioRootProps as RadioProps, RadioControlProps, RadioIndicatorProps, RadioContentProps, } from "./radio";
+export { radioVariants } from "./styles";
+export type { RadioVariants } from "./styles";

package/dist/components/radio/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { RadioRoot, RadioIndicator, RadioControl, RadioContent } from './radio.js';
+export { radioVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Radio = Object.assign(RadioRoot, {
+  Content: RadioContent,
+  Control: RadioControl,
+  Indicator: RadioIndicator,
+  Root: RadioRoot
+});
+
+export { Radio, RadioContent, RadioControl, RadioIndicator, RadioRoot };