@customafk/lunas-ui 0.0.26 → 0.0.27

package/packages/index.css

@@ -1,133 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Pacifico&display=swap') layer(base);
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap') layer(base);
-
-@import 'tailwindcss';
-@import 'tw-animate-css';
-
-@import '../styles/base.css';
-@import '../styles/theme.css';
-@import '../styles/loader.css';
-@import '../styles/typography.css';
-
-:root {
-  --header-height: 3.5rem;
-  --radius: 0.75rem;
-}
-
-@theme inline {
-  /* Typography */
-  --font-number: 'Lato', sans-serif;
-
-  /* Border radius */
-  --radius-sm: calc(var(--radius) - 0.25rem);
-  --radius-md: calc(var(--radius) - 0.125rem);
-  --radius-lg: calc(var(--radius));
-  --radius-xl: calc(var(--radius) + 0.25rem);
-
-  /* Color system */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-
-  --color-primary: var(--primary);
-  --color-primary-muted: var(--primary-muted);
-  --color-primary-weak: var(--primary-weak);
-  --color-primary-strong: var(--primary-strong);
-  --color-primary-intense: var(--primary-intense);
-
-  --color-secondary: var(--secondary);
-  --color-secondary-muted: var(--secondary-muted);
-  --color-secondary-weak: var(--secondary-weak);
-  --color-secondary-strong: var(--secondary-strong);
-  --color-secondary-intense: var(--secondary-intense);
-
-  --color-muted: var(--muted);
-  --color-muted-muted: var(--muted-muted);
-  --color-muted-weak: var(--muted-weak);
-  --color-muted-strong: var(--muted-strong);
-  --color-muted-intense: var(--muted-intense);
-
-  --color-accent: var(--accent);
-  --color-accent-muted: var(--accent-muted);
-  --color-accent-weak: var(--accent-weak);
-  --color-accent-strong: var(--accent-strong);
-  --color-accent-intense: var(--accent-intense);
-
-  --color-info: var(--info);
-  --color-info-muted: var(--info-muted);
-  --color-info-weak: var(--info-weak);
-  --color-info-strong: var(--info-strong);
-  --color-info-intense: var(--info-intense);
-
-  --color-success: var(--success);
-  --color-success-muted: var(--success-muted);
-  --color-success-weak: var(--success-weak);
-  --color-success-strong: var(--success-strong);
-  --color-success-intense: var(--success-intense);
-
-  --color-warning: var(--warning);
-  --color-warning-muted: var(--warning-muted);
-  --color-warning-weak: var(--warning-weak);
-  --color-warning-strong: var(--warning-strong);
-  --color-warning-intense: var(--warning-intense);
-
-  --color-danger: var(--danger);
-  --color-danger-muted: var(--danger-muted);
-  --color-danger-weak: var(--danger-weak);
-  --color-danger-strong: var(--danger-strong);
-  --color-danger-intense: var(--danger-intense);
-
-  --color-text-positive: var(--text-positive);
-  --color-text-positive-muted: var(--text-positive-muted);
-  --color-text-positive-weak: var(--text-positive-weak);
-  --color-text-positive-strong: var(--text-positive-strong);
-  --color-text-positive-intense: var(--text-positive-intense);
-
-  --color-text-negative: var(--text-negative);
-  --color-text-negative-muted: var(--text-negative-muted);
-  --color-text-negative-weak: var(--text-negative-weak);
-  --color-text-negative-strong: var(--text-negative-strong);
-  --color-text-negative-intense: var(--text-negative-intense);
-
-  --color-border: var(--border);
-  --color-border-strong: var(--border-strong);
-  --color-border-weak: var(--border-weak);
-  --color-border-muted: var(--border-muted);
-
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Effects */
-  --shadow-btn: var(--shadow-btn);
-  --shadow-input: var(--shadow-input);
-  --shadow-nav: var(--shadow-nav);
-  --shadow-card: var(--shadow-card);
-  --shadow-dropdown: var(--shadow-dropdown);
-  --shadow-dialog: var(--shadow-dialog);
-}
-
-@layer base {
-  body {
-    @apply text-text-positive;
-  }
-}

package/packages/lib/utils.ts

@@ -1,24 +0,0 @@
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB
-
-export function formatBytes(
-  bytes: number,
-  opts: {
-    decimals?: number
-    sizeType?: 'accurate' | 'normal'
-  } = {},
-) {
-  const { decimals = 0, sizeType = 'normal' } = opts
-
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
-  const accurateSizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB']
-  if (bytes === 0) return '0 Byte'
-  const i = Math.floor(Math.log(bytes) / Math.log(1024))
-  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${sizeType === 'accurate' ? (accurateSizes[i] ?? 'Bytes') : (sizes[i] ?? 'Bytes')}`
-}
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/packages/stories/1.Guideline.mdx

@@ -1,3 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Documentation" />

package/packages/stories/2.Colors.mdx

@@ -1,145 +0,0 @@
-import { Meta, Title, Subtitle, Description, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'
-
-<Meta title="Colors" />
-
-<Title>Color Palette</Title>
-<Subtitle>Design System Colors</Subtitle>
-
-<ColorPalette>
-  <ColorItem title="background" colors={{ white: '#ffffff' }} />
-  <ColorItem title="foreground" colors={{ default: 'oklch(14% 0 0)' }} />
-  <ColorItem title="card" colors={{ white: '#ffffff' }} />
-  <ColorItem title="card-foreground" colors={{ default: 'oklch(14% 0 286)' }} />
-  <ColorItem title="popover" colors={{ white: '#ffffff' }} />
-  <ColorItem title="popover-foreground" colors={{ default: 'oklch(14% 0 286)' }} />
-  <ColorItem
-    title="primary"
-    colors={{
-      muted: 'oklch(0.94 0.03 295)',
-      weak: 'oklch(0.81 0.1 294)',
-      default: 'oklch(0.61 0.22 293)',
-      strong: 'oklch(0.49 0.24 293)',
-      intense: 'oklch(0.38 0.18 294)',
-    }}
-  />
-  <ColorItem
-    title="secondary"
-    colors={{
-      muted: 'oklch(0.97 0 265)',
-      weak: 'oklch(0.87 0.01 258)',
-      default: 'oklch(0.55 0.02 264)',
-      strong: 'oklch(0.28 0.03 257)',
-      intense: 'oklch(0.13 0.03 262)',
-    }}
-  />
-  <ColorItem
-    title="muted"
-    colors={{
-      muted: 'oklch(0.97 0 286)',
-      weak: 'oklch(0.87 0.01 286)',
-      default: 'oklch(0.55 0.01 286)',
-      strong: 'oklch(0.37 0.01 286)',
-      intense: 'oklch(0.21 0.01 286)',
-    }}
-  />
-  <ColorItem
-    title="accent"
-    colors={{
-      muted: 'oklch(0.97 0.01 248)',
-      weak: 'oklch(0.87 0.02 253)',
-      default: 'oklch(0.55 0.04 257)',
-      strong: 'oklch(0.37 0.04 257)',
-      intense: 'oklch(0.21 0.04 266)',
-    }}
-  />
-  <ColorItem
-    title="info"
-    colors={{
-      muted: 'oklch(0.93 0.03 256)',
-      weak: 'oklch(0.81 0.1 252)',
-      default: 'oklch(0.62 0.19 260)',
-      strong: 'oklch(0.49 0.22 264)',
-      intense: 'oklch(0.38 0.14 266)',
-    }}
-  />
-  <ColorItem
-    title="success"
-    colors={{
-      muted: 'oklch(0.96 0.04 157)',
-      weak: 'oklch(0.8 0.18 152)',
-      default: 'oklch(0.72 0.19 150)',
-      strong: 'oklch(0.63 0.17 149)',
-      intense: 'oklch(0.53 0.14 150)',
-    }}
-  />
-  <ColorItem
-    title="warning"
-    colors={{
-      muted: 'oklch(0.96 0.06 96)',
-      weak: 'oklch(0.84 0.16 84)',
-      default: 'oklch(0.77 0.16 70)',
-      strong: 'oklch(0.67 0.16 58)',
-      intense: 'oklch(0.56 0.15 49)',
-    }}
-  />
-  <ColorItem
-    title="danger"
-    colors={{
-      muted: 'oklch(0.94 0.03 18)',
-      weak: 'oklch(0.71 0.17 22)',
-      default: 'oklch(0.64 0.21 25)',
-      strong: 'oklch(0.58 0.22 27)',
-      intense: 'oklch(0.51 0.19 28)',
-    }}
-  />
-  <ColorItem
-    title="text-positive"
-    colors={{
-      muted: 'oklch(0.87 0.01 286)',
-      weak: 'oklch(0.55 0.01 286)',
-      default: 'oklch(0.27 0.01 286)',
-      strong: 'oklch(0.21 0.01 286)',
-      intense: 'oklch(0 0 0)',
-    }}
-  />
-  <ColorItem
-    title="text-negative"
-    colors={{
-      muted: 'oklch(0.55 0.01 286)',
-      weak: 'oklch(0.87 0.01 286)',
-      default: 'oklch(0.99 0 0)',
-      strong: 'oklch(0.99 0 0)',
-      intense: 'oklch(1 0 0)',
-    }}
-  />
-  <ColorItem
-    title="border"
-    colors={{
-      muted: 'oklch(0.99 0 0)',
-      weak: 'oklch(0.92 0 0)',
-      default: 'oklch(0.72 0 0)',
-      strong: 'oklch(0.37 0 0)',
-      intense: 'oklch(0.14 0 0)',
-    }}
-  />
-  <ColorItem title="input" colors={{ default: 'oklch(0.871 0.006 286.286)' }} />
-  <ColorItem title="ring" colors={{ default: 'oklch(0.81 0.1 294)' }} />
-  <ColorItem
-    title="chart"
-    colors={{
-      1: 'oklch(0.646 0.222 41.116)',
-      2: 'oklch(0.6 0.118 184.704)',
-      3: 'oklch(0.398 0.07 227.392)',
-      4: 'oklch(0.828 0.189 84.429)',
-      5: 'oklch(0.769 0.188 70.08)',
-    }}
-  />
-  <ColorItem title="sidebar" colors={{ default: 'oklch(0.97 0 286)' }} />
-  <ColorItem title="sidebar-foreground" colors={{ default: 'oklch(0.28 0.04 260.03)' }} />
-  <ColorItem title="sidebar-border" colors={{ default: 'oklch(0.92 0.004 286.32)' }} />
-  <ColorItem title="sidebar-ring" colors={{ default: 'oklch(0.871 0.006 286.286)' }} />
-  <ColorItem title="sidebar-primary" colors={{ default: 'oklch(0.59 0.2 277.12)' }} />
-  <ColorItem title="sidebar-primary-foreground" colors={{ default: 'oklch(1 0 0)' }} />
-  <ColorItem title="sidebar-accent" colors={{ default: 'oklch(0.967 0.001 286.375)' }} />
-  <ColorItem title="sidebar-accent-foreground" colors={{ default: 'oklch(0.21 0.006 285.885)' }} />
-</ColorPalette>

package/packages/stories/3.Pypography.mdx

@@ -1,51 +0,0 @@
-import { Meta, Typeset } from '@storybook/addon-docs/blocks';
-
-<Meta title="Typography" />
-
-export const typography = {
-  type: {
-    primary: '"Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif',
-  },
-  weight: {
-    regular: '400',
-    bold: '700',
-    extrabold: '800',
-    black: '900',
-  },
-  size: {
-    s1: 12,
-    s2: 14,
-    s3: 16,
-    m1: 20,
-    m2: 24,
-    m3: 28,
-    l1: 32,
-    l2: 40,
-    l3: 48,
-  },
-};
-
-export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-
-# Typography
-
-**Font:** Nunito Sans
-
-**Weights:** 400(regular), 700(bold), 800(extrabold), 900(black)
-
-<Typeset
-  fontSizes={[
-    Number(typography.size.s1),
-    Number(typography.size.s2),
-    Number(typography.size.s3),
-    Number(typography.size.m1),
-    Number(typography.size.m2),
-    Number(typography.size.m3),
-    Number(typography.size.l1),
-    Number(typography.size.l2),
-    Number(typography.size.l3),
-  ]}
-  fontWeight={typography.weight.black}
-  sampleText={SampleText}
-  fontFamily={typography.type.primary}
-/>

package/packages/stories/cards/simple-card.stories.tsx

@@ -1,24 +0,0 @@
-import { SimpleCard } from '@/components/cards/simple-card'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Cards/SimpleCard',
-  component: SimpleCard,
-} satisfies Meta<typeof SimpleCard>
-
-export default meta
-type Story = StoryObj<typeof SimpleCard>
-
-export const Default: Story = {
-  args: {
-    title: 'Card Title',
-    description: 'This is a simple card description.',
-    children: (
-      <div>
-        <p>This is the content of the card.</p>
-        <p>You can put any React elements here.</p>
-      </div>
-    ),
-  },
-}

package/packages/stories/data-display/data-list.stories.tsx

@@ -1,22 +0,0 @@
-import { DataList, DataListItem } from '@/components/data-display/data-list'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Data Display/Data List',
-  component: DataList,
-} satisfies Meta<typeof DataList>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => (
-    <DataList title="Product Details">
-      <DataListItem label="Name" value="Sample Product" />
-      <DataListItem label="Description" value="This is a sample product description." />
-      <DataListItem label="Price" value="$19.99" />
-      <DataListItem label="Stock" value={100} />
-    </DataList>
-  ),
-}

package/packages/stories/data-display/empty.stories.tsx

@@ -1,13 +0,0 @@
-import { EmptyDisplay } from '@/components/data-display/empty'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Data Display/Empty',
-  component: EmptyDisplay,
-} satisfies Meta<typeof EmptyDisplay>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}

package/packages/stories/data-display/form-dialog.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { FormDialog } from '@/components/dialogs/form-dialog'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Dialogs/FormDialog',
-  component: FormDialog,
-} satisfies Meta<typeof FormDialog>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    form: {
-      defaultValues: {},
-    },
-    open: false,
-    onOpenChange: (open: boolean) => {
-      console.log('Dialog open state changed:', open)
-    },
-    onSubmit: (data) => {
-      console.log('Form submitted with data:', data)
-    },
-    children: <div className="flex h-10 items-center justify-center">Content</div>,
-  },
-}

package/packages/stories/data-display/name.stories.tsx

@@ -1,25 +0,0 @@
-import { NameDisplay } from '@/components/data-display/name'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Data Display/Name Display',
-  component: NameDisplay,
-} satisfies Meta<typeof NameDisplay>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    name: 'John Doe',
-  },
-  render: (args) => <NameDisplay {...args} />,
-}
-
-export const LongName: Story = {
-  args: {
-    name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  },
-  render: (args) => <NameDisplay {...args} />,
-}

package/packages/stories/data-display/phone-number.stories.tsx

@@ -1,17 +0,0 @@
-import { PhoneNumberDisplay } from '@/components/data-display/phone-number'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Data Display/Phone Number',
-  component: PhoneNumberDisplay,
-} satisfies Meta<typeof PhoneNumberDisplay>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    value: '1234567890',
-  },
-}

package/packages/stories/data-display/statistic.stories.tsx

@@ -1,41 +0,0 @@
-import { Statistic } from '@/components/data-display/statistic'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Data Display/Statistic',
-  component: Statistic,
-} satisfies Meta<typeof Statistic>
-
-export default meta
-type Story = StoryObj<typeof Statistic>
-
-export const Default: Story = {
-  args: {
-    value: 1234567.123,
-  },
-}
-
-export const WithPrefixAndSuffix: Story = {
-  args: {
-    value: 1234567.123,
-    prefix: '$',
-    suffix: 'USD',
-  },
-}
-
-export const WithRounding: Story = {
-  args: {
-    value: 1234.56789,
-    precision: 2,
-    roundingMode: 'floor',
-  },
-}
-
-export const WithCustomDecimalAndGroupSeparators: Story = {
-  args: {
-    value: 1234.5,
-    precision: 2,
-    showTrailingZeros: true,
-  },
-}

package/packages/stories/dialogs/confirm-dialog.stories.tsx

@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { ConfirmDialog } from '@/components/dialogs/confirm-dialog'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Dialogs/ConfirmDialog',
-  component: ConfirmDialog,
-} satisfies Meta<typeof ConfirmDialog>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    open: false,
-    isLoading: false,
-    title: 'Confirm Action',
-    description: 'Are you sure you want to proceed with this action?',
-    onOpenChange: (open) => console.log('Dialog open state:', open),
-  },
-  render: (args) => (
-    <ConfirmDialog {...args}>
-      <p>This is a custom content inside the dialog.</p>
-    </ConfirmDialog>
-  ),
-}

package/packages/stories/dialogs/detail-dialog.stories.tsx

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { DetailDialog } from '@/components/dialogs/detail-dialog'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Dialogs/DetailDialog',
-  component: DetailDialog,
-} satisfies Meta<typeof DetailDialog>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    open: true,
-    isLoading: false,
-    sidebar: (
-      <div className="p-4">
-        <h2 className="text-lg font-semibold">Sidebar Content</h2>
-        <p>This is some content in the sidebar.</p>
-      </div>
-    ),
-    title: 'Detail Dialog Title',
-    sidebarTitle: 'Sidebar Title',
-    createdAt: new Date(),
-    onOpenChange: (open: boolean) => console.log('Dialog open state changed:', open),
-    children: (
-      <>
-        <p className="p-4">This is the content of the detail dialog.</p>
-        <p className="p-4">You can add more content here as needed.</p>
-      </>
-    ),
-  },
-}

package/packages/stories/dialogs/error-dialog.stories.tsx

@@ -1,27 +0,0 @@
-import { ErrorDialog } from '@/components/dialogs/error-dialog'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Dialogs/ErrorDialog',
-  component: ErrorDialog,
-} satisfies Meta<typeof ErrorDialog>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    open: false,
-    title: 'An error occurred',
-    description: 'An unexpected error has occurred. Please try again later.',
-    children: <p className="text-muted-foreground text-sm">If the problem persists, please contact support or check the system status for more information.</p>,
-  },
-  render: (args) => {
-    return (
-      <div className="grid w-full max-w-xl items-start gap-4">
-        <ErrorDialog {...args} />
-      </div>
-    )
-  },
-}

package/packages/stories/dialogs/loading-dialog.stories.tsx

@@ -1,16 +0,0 @@
-import { LoadingDialog } from '@/components/dialogs/loading-dialog'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  title: 'Dialogs/LoadingDialog',
-  component: LoadingDialog,
-  tags: ['autodocs'],
-} satisfies Meta<typeof LoadingDialog>
-export default meta
-
-type Story = StoryObj<typeof meta>
-export const Default: Story = {
-  args: {
-    open: true,
-  },
-}

package/packages/stories/forms/combobox-field.stories.tsx

@@ -1,38 +0,0 @@
-import { useForm } from 'react-hook-form'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { ComboboxField } from '@/components/forms/combobox-field'
-import { Form } from '@/components/ui/form'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Forms/ComboboxField',
-  component: ComboboxField,
-} satisfies Meta<typeof ComboboxField>
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    name: 'combobox',
-    options: [
-      { value: 'option1', label: 'Option 1' },
-      { value: 'option2', label: 'Option 2' },
-      { value: 'option3', label: 'Option 3' },
-    ],
-  },
-  render: (args) => {
-    const form = useForm({
-      defaultValues: {
-        combobox: '',
-      },
-    })
-    return (
-      <div className="w-80">
-        <Form {...form}>
-          <ComboboxField {...args} />
-        </Form>
-      </div>
-    )
-  },
-}