@petnow/ui 3.0.3 → 4.0.0

package/tailwind.css

@@ -2,6 +2,14 @@
 
 @import "./petnow-design-system-v1.css";
 
+@import "tw-animate-css";
+
+@import "shadcn/tailwind.css";
+
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
 @theme {
   --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
   --background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops));
@@ -154,3 +162,126 @@
     @apply text-[11px] leading-[16px] font-medium tracking-normal;
   }
 }
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --font-sans: "Geist Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/dist/src/components/mobile/chip/Chip.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    className?: string;
-    text: string;
-    isSelected: boolean;
-    onClick: () => void;
-    disabled?: boolean;
-}
-declare const Chip: ({ className, text, isSelected, onClick, disabled }: Props) => import("react/jsx-runtime").JSX.Element;
-export default Chip;

package/dist/src/components/mobile/chip/Chip.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Chip } from './Chip';
-declare const meta: Meta<typeof Chip>;
-export default meta;
-type Story = StoryObj<typeof Chip>;
-export declare const Default: Story;

package/dist/src/components/mobile/popup/Popup.d.ts

@@ -1,33 +0,0 @@
-import { ReactNode } from 'react';
-interface Props {
-    isOpen: boolean;
-    setIsOpen: (newState: boolean) => void;
-    onClose?: () => void;
-    title?: string | ReactNode;
-    image?: Image;
-    description?: string | ReactNode;
-    confirm?: Confirm;
-    cancel?: Cancel;
-    disableOutsideClick?: boolean;
-    className?: {
-        popup?: string;
-        image?: string;
-        title?: string;
-        description?: string;
-    };
-}
-interface Image {
-    url: string;
-    alt: string;
-}
-interface Confirm {
-    text: string;
-    onClick: () => void;
-    disabled?: boolean;
-}
-interface Cancel {
-    text: string;
-    disabled?: boolean;
-}
-declare const Popup: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export default Popup;

package/dist/src/components/pc/autocomplete/LabeledAutocomplete.d.ts

@@ -1,17 +0,0 @@
-interface AutocompleteOption {
-    name: string | undefined;
-    value: string | boolean | number | undefined;
-    [key: string]: unknown;
-}
-interface Props {
-    label: string;
-    placeholder: string;
-    value: string | undefined;
-    options: AutocompleteOption[];
-    onChange: (value: AutocompleteOption) => void;
-    disabled?: boolean;
-    helperText?: string;
-    disableDebounce?: true;
-}
-declare const LabeledAutocomplete: ({ label, placeholder, value, options, onChange, disabled, helperText, disableDebounce, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default LabeledAutocomplete;

package/dist/src/components/pc/autocomplete/LabeledAutocomplete.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as LabeledAutocomplete } from './LabeledAutocomplete.tsx';
-declare const meta: Meta<typeof LabeledAutocomplete>;
-export default meta;
-type Story = StoryObj<typeof LabeledAutocomplete>;
-export declare const Default: Story;
-export declare const DisableDebounce: Story;
-export declare const Disabled: Story;

package/dist/src/components/pc/card/AccordionCard.d.ts

@@ -1,9 +0,0 @@
-import { JSXElementConstructor, ReactElement, ReactNode } from 'react';
-interface Props {
-    title: string;
-    description: string | ReactElement<string | JSXElementConstructor<unknown>> | ReactNode;
-    titleTextClassName?: string;
-    descriptionTextClassName?: string;
-}
-declare const AccordionCard: ({ title, description, titleTextClassName, descriptionTextClassName }: Props) => import("react/jsx-runtime").JSX.Element;
-export default AccordionCard;

package/dist/src/components/pc/card/AccordionCard.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as AccordionCard } from './AccordionCard.tsx';
-declare const meta: Meta<typeof AccordionCard>;
-export default meta;
-type Story = StoryObj<typeof AccordionCard>;
-export declare const Default: Story;
-export declare const AdditionalClassName: Story;

package/dist/src/components/pc/checkbox/LabeledCheckbox.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    checked?: boolean;
-    label?: string;
-    onChange: (newValue: boolean) => void;
-    termImageUrl: string;
-}
-declare const LabeledCheckbox: ({ checked, label, onChange, termImageUrl }: Props) => import("react/jsx-runtime").JSX.Element;
-export default LabeledCheckbox;

package/dist/src/components/pc/checkbox/LabeledCheckbox.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Checkbox } from './LabeledCheckbox.tsx';
-declare const meta: Meta<typeof Checkbox>;
-export default meta;
-type Story = StoryObj<typeof Checkbox>;
-export declare const Default: Story;

package/dist/src/components/pc/datepicker/LabeledDatepicker.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    label: string;
-    placeholder: string;
-    value: string;
-    onChange: (date: Date) => void;
-    helperText?: string;
-}
-declare const LabeledDatepicker: ({ label, placeholder, value, onChange, helperText }: Props) => import("react/jsx-runtime").JSX.Element;
-export default LabeledDatepicker;

package/dist/src/components/pc/datepicker/LabeledDatepicker.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as LabeledDatepicker } from './LabeledDatepicker';
-declare const meta: Meta<typeof LabeledDatepicker>;
-export default meta;
-type Story = StoryObj<typeof LabeledDatepicker>;
-export declare const Default: Story;

package/dist/src/components/pc/input/LabeledAddressInput.d.ts

@@ -1,13 +0,0 @@
-interface Props {
-    label: string;
-    value: {
-        front: string | undefined;
-        back: string | undefined;
-    };
-    onFrontChange: (newValue: string) => void;
-    onBackChange: (newValue: string) => void;
-    onPostalCodeChange?: (value: string) => void;
-    disabled?: boolean;
-}
-declare const LabeledAddressInput: ({ label, value, onFrontChange, onBackChange, onPostalCodeChange, disabled }: Props) => import("react/jsx-runtime").JSX.Element;
-export default LabeledAddressInput;

package/dist/src/components/pc/input/LabeledAddressInput.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as LabeledAddressInput } from './LabeledAddressInput.tsx';
-declare const meta: Meta<typeof LabeledAddressInput>;
-export default meta;
-type Story = StoryObj<typeof LabeledAddressInput>;
-export declare const Default: Story;

package/dist/src/components/pc/input/LabeledInput.d.ts

@@ -1,15 +0,0 @@
-import { ChangeEvent, LegacyRef, ReactNode } from 'react';
-interface Props {
-    label: string;
-    value?: string;
-    defaultValue?: string;
-    placeholder: string;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    inputRef?: LegacyRef<HTMLInputElement>;
-    disabled?: boolean;
-    maxLength?: number;
-    helperText?: string | ReactNode;
-    isNumber?: true;
-}
-export declare const LabeledInput: ({ label, value, defaultValue, placeholder, onChange, inputRef, disabled, maxLength, helperText, isNumber, }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/components/pc/input/LabeledInput.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { LabeledInput } from './LabeledInput.tsx';
-declare const meta: Meta<typeof LabeledInput>;
-export default meta;
-type Story = StoryObj<typeof LabeledInput>;
-export declare const Default: Story;

package/dist/src/components/pc/select/LabeledSelect.d.ts

@@ -1,19 +0,0 @@
-interface Props {
-    label: string;
-    placeholder: string;
-    options: {
-        name: string;
-        [key: string]: string | number | readonly string[];
-    }[];
-    onChange: (value: {
-        name: string;
-        [key: string]: string | number | readonly string[];
-    }) => void;
-    value: {
-        name: string;
-        [key: string]: string | number | readonly string[];
-    };
-    disabled?: boolean;
-}
-declare const LabeledSelect: ({ label, placeholder, value, options, onChange, disabled }: Props) => import("react/jsx-runtime").JSX.Element;
-export default LabeledSelect;

package/dist/src/components/pc/select/LabeledSelect.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as LabeledSelect } from './LabeledSelect.tsx';
-declare const meta: Meta<typeof LabeledSelect>;
-export default meta;
-type Story = StoryObj<typeof LabeledSelect>;
-export declare const Default: Story;
-export declare const Disabled: Story;

package/dist/test/LabeledCheckbox.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/test/LabeledDatepicker.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/test/LabeledInput.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/test/LabeledSelect.test.d.ts

@@ -1 +0,0 @@
-export {};