cetec-design-system 0.0.2

package/src/components/CheckBox/CheckBox.tsx

@@ -0,0 +1,37 @@
+import { Box, type BoxProps } from "../Box";
+import { ReactNode } from 'react';
+import { Label } from "../Label";
+import { checkbox, type CheckboxVariantProps } from "@styled-system/recipes";
+import { Icon } from "../Icon";
+
+export type CheckBoxProps = Omit<BoxProps, keyof CheckboxVariantProps > & CheckboxVariantProps & 
+    {
+        indeterminate?: boolean;
+        error?: boolean;
+        children?: Omit<ReactNode, keyof HTMLInputElement> | string;
+    };
+
+export const CheckBox: React.FC<CheckBoxProps> = (
+  {
+    error = false,
+    indeterminate = false,
+    children,
+    ...props
+}: CheckBoxProps, 
+) => {
+    const { container, input, indicator } = checkbox({});
+    return (
+        <Label className={container}>
+            <Box
+                as="input"
+                type="checkbox"
+                className={input}
+                {...props}
+            />
+            <Icon className={indicator} name={'checkbox'} />
+            <Icon className={indicator} name={'checkbox-checked'} />
+            <Icon className={indicator} name={'checkbox-indeterminate'} />
+            {children}
+        </Label>
+    );
+}

package/src/components/CheckBox/index.tsx

@@ -0,0 +1 @@
+export { CheckBox } from "./CheckBox";

package/src/components/Code/Code.tsx

@@ -0,0 +1,35 @@
+import { Box, type BoxProps } from '~/components/Box';
+import { Text, type TextProps } from '~/components/Text';
+import { code, type CodeVariantProps } from '@styled-system/recipes';
+import { cx } from '@styled-system/css';
+import { splitProps } from '~/utils/splitProps';
+
+export type CodeProps = Omit<BoxProps, keyof CodeVariantProps | keyof TextProps> & CodeVariantProps & TextProps & {
+  children?: string | React.ReactNode;
+  lang?: string;
+};
+
+export const Code: React.FC<CodeProps> = (
+  {
+    lang, 
+    children, 
+    ...props 
+  }: CodeProps,
+) => {
+  const [className, otherProps] = splitProps(props);
+  return (
+    <Box
+      as="code"
+      className={cx(
+        code({}),
+        className,
+      )}
+      lang={lang}
+      {...otherProps}
+    >
+      <Text color="slate.0">
+        {children}
+      </Text>
+    </Box>
+  )
+};

package/src/components/Code/Pre.tsx

@@ -0,0 +1,35 @@
+import { Box, type BoxProps } from '~/components/Box';
+import { Code } from './Code';
+import { splitProps } from '~/utils/splitProps';
+import { cx } from '@styled-system/css';
+import { pre } from '@styled-system/recipes';
+
+export type PreProps = BoxProps & {
+  children: string | React.ReactNode;
+  lang?: string;
+  as?: string;
+}
+
+export const Pre: React.FC<PreProps> = ( 
+  {
+    children, 
+    lang, 
+    ...props
+  }: PreProps,
+) => {
+  const [className, otherProps] = splitProps(props);
+  return (
+    <Box
+      as="pre"
+      className={cx(
+        pre({}),
+        className,
+      )}
+      {...otherProps}
+    >
+      <Code lang={lang} slot="react" bg="transparent" {...otherProps}>
+        {children}
+      </Code>
+    </Box>
+  );
+};

package/src/components/Code/copy-to-clipboard-button.tsx

@@ -0,0 +1,41 @@
+import { useCopyToClipboard } from '@uidotdev/usehooks'
+import { CheckIcon, CopyIcon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { IconButton } from '~/components/ui'
+
+interface Props {
+  content: string
+  dark?: boolean
+}
+
+export const CopyToClipboardButton = (props: Props) => {
+  const { content, dark } = props
+  const [_, copyToClipboard] = useCopyToClipboard()
+  const [visible, setVisible] = useState(true)
+
+  useEffect(() => {
+    if (visible) return
+    const timer = setTimeout(() => setVisible(true), 1000)
+    return () => clearTimeout(timer)
+  }, [visible])
+
+  const handleClick = () => {
+    copyToClipboard(content)
+    setVisible(false)
+  }
+
+  const styles = dark ? { color: 'gray.dark.12', _hover: { bg: 'gray.dark.a3' } } : {}
+
+  return (
+    <IconButton
+      variant="ghost"
+      size="sm"
+      aria-label="Copy code to clipboard"
+      display={{ base: 'none', lg: 'inline-flex' }}
+      onClick={handleClick}
+      {...styles}
+    >
+      {visible ? <CopyIcon /> : <CheckIcon />}
+    </IconButton>
+  )
+}

package/src/components/Code/index.tsx

@@ -0,0 +1,2 @@
+export { Code, type CodeProps } from './Code';
+export { Pre, type PreProps } from './Pre';

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,26 @@
+import { Box, type BoxProps } from '../Box/Box';
+import { divider, type DividerVariantProps } from '@styled-system/recipes';
+
+import { cx } from '@styled-system/css';
+import { splitProps } from '~/utils/splitProps';
+
+export type DividerProps = Omit<BoxProps, keyof DividerVariantProps> &
+  DividerVariantProps & {
+    direction?: string;
+    weight?: string;
+  };
+
+export const Divider: React.FC<DividerProps> = ({
+  direction,
+  weight,
+  ...props
+}: DividerProps) => {
+  const [className, otherProps] = splitProps(props);
+  return (
+    <Box
+      as="div"
+      className={cx(divider({ direction, weight }), className)}
+      {...otherProps}
+    />
+  );
+};

package/src/components/Divider/index.tsx

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from './Divider';

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,33 @@
+import { Text, type TextProps } from '~/components/Text';
+import { heading, type HeadingVariantProps } from '@styled-system/recipes';
+import { cx } from '@styled-system/css';
+import { splitProps } from '~/utils/splitProps';
+
+export type HeadingProps = Omit<TextProps, keyof HeadingVariantProps> & HeadingVariantProps & {
+  children?: string | React.ReactNode;
+  level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+
+export const Heading: React.FC<HeadingProps> = (
+  { 
+    level='h2', 
+    children, 
+    ...props 
+  }: HeadingProps,
+) => {
+
+  const [ className, otherProps ] = splitProps(props);
+  return (
+    <Text
+      as={level}
+      className={cx(
+        heading({ level }), 
+        className,
+      )}
+      {...otherProps}
+    >
+      {children}
+    </Text>
+  );
+};
+

package/src/components/Heading/index.tsx

@@ -0,0 +1 @@
+export { Heading, type HeadingProps } from './Heading';

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,31 @@
+/** @jsxImportSource @emotion/react */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Icon, IconNames } from ".";
+import { IconGallery, IconItem } from "@storybook/blocks";
+
+const meta = {
+  title: "Components/Icon",
+  component: Icon,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: "add", // or any default icon name
+  },
+  render: () => (
+    <IconGallery>
+      {Object.entries(IconNames).map(([key, name]) => (
+        <IconItem key={key} name={name}>
+          <Icon name={name} />
+        </IconItem>
+      ))}
+    </IconGallery>
+  ),
+};

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,46 @@
+import { SVGAttributes } from 'react';
+import { Box, type BoxProps } from '~/components/Box';
+import { cx } from '@styled-system/css';
+import { IconNamesList } from './icons';
+import { icon } from '@styled-system/patterns';
+import { numericSizes } from '~/styles/tokens';
+import { splitProps } from '~/utils/splitProps';
+import { ConditionalValue } from '@styled-system/types';
+import { WithEscapeHatch } from '@styled-system/types/prop-type';
+import { ColorToken } from '@styled-system/tokens';
+
+/*
+ * Using the size prop in this way cannot handle non-numeric sizes,
+ * so importing this list of keys directly from the tokens to ensure
+ * that only valid sizes are allowed.
+ */
+export type AllowedIconSizes = keyof typeof numericSizes;
+
+export type IconProps = Omit<BoxProps, 'size'> &
+  SVGAttributes<SVGElement> & {
+    name: IconNamesList;
+    size?: AllowedIconSizes;
+    fill?: ConditionalValue<WithEscapeHatch<ColorToken | `var(--${string})`>>;
+  };
+
+export const Icon: React.FC<IconProps> = ({
+  name,
+  size = '24',
+  fill = 'current',
+  ...props
+}: IconProps) => {
+  const [className, otherProps] = splitProps(props);
+
+  return (
+    <Box
+      as="svg"
+      name={name}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cx(icon({ size: size, fill }), className)}
+      {...otherProps}
+    >
+      <use xlinkHref={`/sprite.svg#${name}`} />
+    </Box>
+  );
+};

package/src/components/Icon/iconNames.ts

@@ -0,0 +1,219 @@
+export const IconNames = {
+  'aa-placeholder': 'aa-placeholder',
+  'alarm': 'alarm',
+  'apps': 'apps',
+  'arrow-down': 'arrow-down',
+  'arrow-drop-down': 'arrow-drop-down',
+  'arrow-drop-up': 'arrow-drop-up',
+  'arrow-left': 'arrow-left',
+  'arrow-line-down': 'arrow-line-down',
+  'arrow-line-left': 'arrow-line-left',
+  'arrow-line-right': 'arrow-line-right',
+  'arrow-line-up': 'arrow-line-up',
+  'arrow-prompt': 'arrow-prompt',
+  'arrow-redo': 'arrow-redo',
+  'arrow-right': 'arrow-right',
+  'arrow-square-in': 'arrow-square-in',
+  'arrow-square-out': 'arrow-square-out',
+  'arrow-undo': 'arrow-undo',
+  'arrow-up': 'arrow-up',
+  'arrows-down-up': 'arrows-down-up',
+  'arrows-left-right': 'arrows-left-right',
+  'at': 'at',
+  'attachment': 'attachment',
+  'barcode-reader': 'barcode-reader',
+  'barcode': 'barcode',
+  'basket': 'basket',
+  'bell-active': 'bell-active',
+  'bell-slash': 'bell-slash',
+  'bell': 'bell',
+  'bin': 'bin',
+  'bookmark-outlined': 'bookmark-outlined',
+  'bookmark': 'bookmark',
+  'bookmarks': 'bookmarks',
+  'Building': 'Building',
+  'calendar-add': 'calendar-add',
+  'calendar-view-day': 'calendar-view-day',
+  'calendar-view-month': 'calendar-view-month',
+  'calendar-view-week': 'calendar-view-week',
+  'calendar': 'calendar',
+  'caret-down': 'caret-down',
+  'caret-left': 'caret-left',
+  'caret-right': 'caret-right',
+  'caret-up': 'caret-up',
+  'cart': 'cart',
+  'check-thick': 'check-thick',
+  'check': 'check',
+  'checkbox-checked': 'checkbox-checked',
+  'checkbox-focus': 'checkbox-focus',
+  'checkbox-indeterminate': 'checkbox-indeterminate',
+  'checkbox': 'checkbox',
+  'circle-check': 'circle-check',
+  'circle': 'circle',
+  'circles-add': 'circles-add',
+  'clipboard': 'clipboard',
+  'clock-countdown': 'clock-countdown',
+  'clock': 'clock',
+  'cloud-synced': 'cloud-synced',
+  'code': 'code',
+  'color': 'color',
+  'copy': 'copy',
+  'credit-card': 'credit-card',
+  'cut': 'cut',
+  'database': 'database',
+  'devices': 'devices',
+  'dictionary': 'dictionary',
+  'dots': 'dots',
+  'download-cloud': 'download-cloud',
+  'download': 'download',
+  'dragger': 'dragger',
+  'edit': 'edit',
+  'encrypted': 'encrypted',
+  'envelope': 'envelope',
+  'equal': 'equal',
+  'eraser': 'eraser',
+  'error': 'error',
+  'event-list': 'event-list',
+  'export': 'export',
+  'extension': 'extension',
+  'eye-slash': 'eye-slash',
+  'eye': 'eye',
+  'file-add': 'file-add',
+  'file': 'file',
+  'files': 'files',
+  'filter-remove': 'filter-remove',
+  'filter': 'filter',
+  'finish': 'finish',
+  'flag': 'flag',
+  'forklift': 'forklift',
+  'garage': 'garage',
+  'globe': 'globe',
+  'hash': 'hash',
+  'heart-outlined': 'heart-outlined',
+  'heart': 'heart',
+  'help': 'help',
+  'history': 'history',
+  'home': 'home',
+  'image': 'image',
+  'images': 'images',
+  'inbox': 'inbox',
+  'infinity': 'infinity',
+  'info': 'info',
+  'inventory': 'inventory',
+  'invoice': 'invoice',
+  'jump-back': 'jump-back',
+  'jump-forward': 'jump-forward',
+  'kbd-backspace': 'kbd-backspace',
+  'kbd-capslock': 'kbd-capslock',
+  'kbd-command': 'kbd-command',
+  'kbd-control': 'kbd-control',
+  'kbd-hide': 'kbd-hide',
+  'kbd-option': 'kbd-option',
+  'kbd-return': 'kbd-return',
+  'kbd-shift': 'kbd-shift',
+  'kbd-space': 'kbd-space',
+  'kbd': 'kbd',
+  'link-slash': 'link-slash',
+  'link': 'link',
+  'list-bullets': 'list-bullets',
+  'list-checks': 'list-checks',
+  'list-numbers': 'list-numbers',
+  'lock-open': 'lock-open',
+  'lock': 'lock',
+  'map-pin': 'map-pin',
+  'mark-unread': 'mark-unread',
+  'menu-close': 'menu-close',
+  'menu': 'menu',
+  'message': 'message',
+  'messages': 'messages',
+  'minus-thick': 'minus-thick',
+  'minus': 'minus',
+  'money': 'money',
+  'monitor': 'monitor',
+  'moon': 'moon',
+  'note': 'note',
+  'nut': 'nut',
+  'order': 'order',
+  'package': 'package',
+  'page-first': 'page-first',
+  'page-last': 'page-last',
+  'parts': 'parts',
+  'password': 'password',
+  'pause': 'pause',
+  'pencil': 'pencil',
+  'percent': 'percent',
+  'play-pause': 'play-pause',
+  'play': 'play',
+  'plus': 'plus',
+  'printer': 'printer',
+  'prohibit': 'prohibit',
+  'question-mark': 'question-mark',
+  'quote': 'quote',
+  'radio-checked': 'radio-checked',
+  'radio-focus': 'radio-focus',
+  'radio': 'radio',
+  'receipt': 'receipt',
+  'refresh': 'refresh',
+  'repeat': 'repeat',
+  'reply-all': 'reply-all',
+  'reply': 'reply',
+  'ribbon': 'ribbon',
+  'rows-add': 'rows-add',
+  'rules': 'rules',
+  'search-items': 'search-items',
+  'search': 'search',
+  'send': 'send',
+  'settings': 'settings',
+  'share': 'share',
+  'shuffle': 'shuffle',
+  'skip-back': 'skip-back',
+  'skip-forward': 'skip-forward',
+  'skull': 'skull',
+  'sliders': 'sliders',
+  'sort-alpha-down': 'sort-alpha-down',
+  'sort-alpha-up': 'sort-alpha-up',
+  'sort-ascending': 'sort-ascending',
+  'sort-descending': 'sort-descending',
+  'sort-time-down': 'sort-time-down',
+  'sort-time-up': 'sort-time-up',
+  'square-add': 'square-add',
+  'square': 'square',
+  'stamp': 'stamp',
+  'star-outlined': 'star-outlined',
+  'star': 'star',
+  'start': 'start',
+  'stop': 'stop',
+  'success': 'success',
+  'sun': 'sun',
+  'support': 'support',
+  'sync': 'sync',
+  'tag': 'tag',
+  'target': 'target',
+  'text-add': 'text-add',
+  'time-add': 'time-add',
+  'timer': 'timer',
+  'toolbox': 'toolbox',
+  'tools': 'tools',
+  'trash': 'trash',
+  'trophy': 'trophy',
+  'truck-trailer': 'truck-trailer',
+  'update': 'update',
+  'upload-cloud': 'upload-cloud',
+  'upload': 'upload',
+  'user-add': 'user-add',
+  'user-details': 'user-details',
+  'user-group': 'user-group',
+  'user-id-badge': 'user-id-badge',
+  'user-id-card': 'user-id-card',
+  'user': 'user',
+  'verified': 'verified',
+  'video': 'video',
+  'view-cards': 'view-cards',
+  'view-doc': 'view-doc',
+  'view-grid': 'view-grid',
+  'view-rows': 'view-rows',
+  'view-table': 'view-table',
+  'warning': 'warning',
+  'work-order': 'work-order',
+  'x': 'x'
+} as const;

package/src/components/Icon/icons.d.ts

@@ -0,0 +1 @@
+export type IconNamesList = 'aa-placeholder' | 'alarm' | 'apps' | 'arrow-down' | 'arrow-drop-down' | 'arrow-drop-up' | 'arrow-left' | 'arrow-line-down' | 'arrow-line-left' | 'arrow-line-right' | 'arrow-line-up' | 'arrow-prompt' | 'arrow-redo' | 'arrow-right' | 'arrow-square-in' | 'arrow-square-out' | 'arrow-undo' | 'arrow-up' | 'arrows-down-up' | 'arrows-left-right' | 'at' | 'attachment' | 'barcode-reader' | 'barcode' | 'basket' | 'bell-active' | 'bell-slash' | 'bell' | 'bin' | 'bookmark-outlined' | 'bookmark' | 'bookmarks' | 'Building' | 'calendar-add' | 'calendar-view-day' | 'calendar-view-month' | 'calendar-view-week' | 'calendar' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'cart' | 'check-thick' | 'check' | 'checkbox-checked' | 'checkbox-focus' | 'checkbox-indeterminate' | 'checkbox' | 'circle-check' | 'circle' | 'circles-add' | 'clipboard' | 'clock-countdown' | 'clock' | 'cloud-synced' | 'code' | 'color' | 'copy' | 'credit-card' | 'cut' | 'database' | 'devices' | 'dictionary' | 'dots' | 'download-cloud' | 'download' | 'dragger' | 'edit' | 'encrypted' | 'envelope' | 'equal' | 'eraser' | 'error' | 'event-list' | 'export' | 'extension' | 'eye-slash' | 'eye' | 'file-add' | 'file' | 'files' | 'filter-remove' | 'filter' | 'finish' | 'flag' | 'forklift' | 'garage' | 'globe' | 'hash' | 'heart-outlined' | 'heart' | 'help' | 'history' | 'home' | 'image' | 'images' | 'inbox' | 'infinity' | 'info' | 'inventory' | 'invoice' | 'jump-back' | 'jump-forward' | 'kbd-backspace' | 'kbd-capslock' | 'kbd-command' | 'kbd-control' | 'kbd-hide' | 'kbd-option' | 'kbd-return' | 'kbd-shift' | 'kbd-space' | 'kbd' | 'link-slash' | 'link' | 'list-bullets' | 'list-checks' | 'list-numbers' | 'lock-open' | 'lock' | 'map-pin' | 'mark-unread' | 'menu-close' | 'menu' | 'message' | 'messages' | 'minus-thick' | 'minus' | 'money' | 'monitor' | 'moon' | 'note' | 'nut' | 'order' | 'package' | 'page-first' | 'page-last' | 'parts' | 'password' | 'pause' | 'pencil' | 'percent' | 'play-pause' | 'play' | 'plus' | 'printer' | 'prohibit' | 'question-mark' | 'quote' | 'radio-checked' | 'radio-focus' | 'radio' | 'receipt' | 'refresh' | 'repeat' | 'reply-all' | 'reply' | 'ribbon' | 'rows-add' | 'rules' | 'search-items' | 'search' | 'send' | 'settings' | 'share' | 'shuffle' | 'skip-back' | 'skip-forward' | 'skull' | 'sliders' | 'sort-alpha-down' | 'sort-alpha-up' | 'sort-ascending' | 'sort-descending' | 'sort-time-down' | 'sort-time-up' | 'square-add' | 'square' | 'stamp' | 'star-outlined' | 'star' | 'start' | 'stop' | 'success' | 'sun' | 'support' | 'sync' | 'tag' | 'target' | 'text-add' | 'time-add' | 'timer' | 'toolbox' | 'tools' | 'trash' | 'trophy' | 'truck-trailer' | 'update' | 'upload-cloud' | 'upload' | 'user-add' | 'user-details' | 'user-group' | 'user-id-badge' | 'user-id-card' | 'user' | 'verified' | 'video' | 'view-cards' | 'view-doc' | 'view-grid' | 'view-rows' | 'view-table' | 'warning' | 'work-order' | 'x'

package/src/components/Icon/index.tsx

@@ -0,0 +1,3 @@
+export { Icon, type IconProps } from './Icon';
+export type { IconNamesList } from './icons';
+export { IconNames } from './iconNames';

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,58 @@
+import React, { FC, ReactElement } from 'react';
+import { cx } from '@styled-system/css';
+import { Box, type BoxProps } from '~/components/Box';
+import {
+  iconButton,
+  type IconButtonVariantProps,
+} from '@styled-system/recipes';
+import { ButtonContent } from '~/components/Button/ButtonContent';
+import { Icon } from '~/components/Icon';
+import { splitProps } from '~/utils/splitProps';
+
+/**
+ * The IconButton component builds on Box.
+ * It automatically renders as a "button" (or an "a" if an href is provided)
+ * and applies the iconButton recipe styles.
+ *
+ * It requires exactly one child which must be an <Icon /> element.
+ */
+export type IconButtonProps = BoxProps &
+  IconButtonVariantProps & {
+    href?: string;
+    loading?: boolean;
+    children: ReactElement<typeof Icon>;
+    disabled?: boolean;
+    type?: 'submit' | 'reset' | 'button';
+  };
+
+export const IconButton: FC<IconButtonProps> = ({
+  variant,
+  size,
+  href,
+  children,
+  loading,
+  disabled,
+  type = 'button',
+  ...props
+}: IconButtonProps) => {
+  const isDisabled = loading || disabled;
+  const [className, otherProps] = splitProps(props);
+
+  return (
+    <Box
+      as={href ? 'a' : 'button'}
+      disabled={isDisabled}
+      aria-disabled={isDisabled}
+      className={cx(iconButton({ variant, size }), className)}
+      {...(href ? { href } : { type })}
+      {...otherProps}
+      {...(isDisabled &&
+        href && {
+          onClick: (e: React.MouseEvent<HTMLAnchorElement>) =>
+            e.preventDefault(),
+        })}
+    >
+      <ButtonContent loading={!!loading}>{children}</ButtonContent>
+    </Box>
+  );
+};

package/src/components/IconButton/index.tsx

@@ -0,0 +1 @@
+export { IconButton, type IconButtonProps } from './IconButton';

package/src/components/Input/Input.tsx

@@ -0,0 +1,42 @@
+import { Text, type TextProps } from '~/components/Text';
+import { Box, type BoxProps } from '~/components/Box';
+import { Label } from '~/components/Label';
+import { input, type InputVariantProps } from '@styled-system/recipes';
+import { cx } from '@styled-system/css';
+import { splitProps } from '~/utils/splitProps';
+
+export type InputProps = Omit<BoxProps, keyof InputVariantProps | keyof TextProps> & TextProps & InputVariantProps & {
+  label?: string;
+  type?: string | HTMLInputElement;
+  variant?: 'stacked' | 'internalLabel';
+  children?: string | React.ReactNode;
+};
+
+export const Input: React.FC<InputProps> = (
+  { 
+    label, 
+    variant,
+    type,
+    children,
+    ...props 
+  }: InputProps,
+) => {
+
+  const [ className, otherProps ] = splitProps(props);
+  return (
+    <Label>
+      <Text as='span'>{label}</Text>
+      <Box
+        as="input"
+        type={type}
+        className={cx(
+          input({ variant }),
+          className,
+        )}
+        htmlFor={props.id || ''}
+        {...otherProps}
+      />
+    </Label>
+  );
+};
+

package/src/components/Input/index.tsx

@@ -0,0 +1 @@
+export { Input, type InputProps } from './Input';