@bronzelabs/oakma-ui 0.0.1 → 0.0.2

package/src/components/Button/Button.stories.tsx

@@ -1,314 +0,0 @@
-import React from "react"
-
-// Components
-import Button from "./Button"
-
-// Types
-import type { Meta, StoryFn } from "@storybook/react-webpack5"
-import type { ButtonProps } from "./Button"
-import { BUTTON_SIZES, BUTTON_VARIANTS } from "./types"
-
-// Utils
-import { DummyPhoneIcon } from "../../../.storybook/components"
-
-/*
-
-
-
-
-
-*/
-
-const meta: Meta<ButtonProps<"button"> | ButtonProps<"a">> = {
-  title: "Components/Button",
-  component: Button,
-  parameters: {
-    docs: {
-      description: {
-        component: "A standard button and or link for common UI interactions.",
-      },
-    },
-    controls: {
-      exclude: ["className", "onClick"],
-    },
-  },
-  argTypes: {
-    size: {
-      type: "string",
-      description: "Size of the Button.",
-      table: {
-        type: {
-          summary: Object.keys(BUTTON_SIZES)
-            .map(s => `"${s}"`)
-            .join("|"),
-        },
-        defaultValue: {
-          summary: `"lg"`,
-        },
-      },
-      options: Object.keys(BUTTON_SIZES),
-      control: { type: "select" },
-    },
-    variant: {
-      type: "string",
-      description: "Style of the Button.",
-      table: {
-        type: {
-          summary: Object.keys(BUTTON_VARIANTS)
-            .map(v => `"${v}"`)
-            .join("|"),
-        },
-        defaultValue: {
-          summary: `"primary"`,
-        },
-      },
-      options: Object.keys(BUTTON_VARIANTS),
-      control: { type: "select" },
-    },
-    disabled: {
-      type: "boolean",
-      description: "Whether the Button should render as disabled.",
-      table: {
-        type: {
-          summary: "boolean",
-        },
-        defaultValue: {
-          summary: "false",
-        },
-      },
-    },
-    children: {
-      type: "string",
-      description:
-        "The children to render inside the Button *(typically the text you want the Button to diplay)*.",
-      table: {
-        type: {
-          summary: "string | React.ReactNode",
-        },
-        defaultValue: {
-          summary: "undefined",
-        },
-      },
-    },
-    loading: {
-      type: "boolean",
-      description: "Whether the Button should show it's loading state.",
-      table: {
-        type: {
-          summary: "boolean",
-        },
-        defaultValue: {
-          summary: "false",
-        },
-      },
-    },
-    iconPosition: {
-      type: "string",
-      description: "The position of the icon if an icon is provided.",
-      table: {
-        type: {
-          summary: `"left" | "right"`,
-        },
-        defaultValue: {
-          summary: `"left"`,
-        },
-      },
-      options: ["left", "right"],
-      control: { type: "select" },
-    },
-    href: {
-      type: "string",
-      description:
-        "Passing a href prop will result in a link Button being rendered with an <a> DOM node *(and then give access to additional props: `rel`, `target`, `referrerPolicy`)*.",
-      table: {
-        type: {
-          summary: "string",
-        },
-        defaultValue: {
-          summary: "undefined",
-        },
-      },
-    },
-  },
-  args: {
-    size: "lg",
-    variant: "primary",
-    as: "button",
-    disabled: false,
-    loading: false,
-    iconPosition: "left",
-  },
-}
-
-const Template: StoryFn<ButtonProps> = props => <Button {...props} />
-
-const SizesTemplate: StoryFn<ButtonProps> = args => (
-  <>
-    <Button {...args} size="lg">
-      Large
-    </Button>
-    <Button {...args} size="md">
-      Medium
-    </Button>
-    <Button {...args} size="sm">
-      Small
-    </Button>
-  </>
-)
-
-const VariantsTemplate: StoryFn<ButtonProps> = args => (
-  <>
-    <Button {...args} variant="primary">
-      Primary
-    </Button>
-    <Button {...args} variant="secondary">
-      Secondary
-    </Button>
-    <div className="-m-1 bg-teal-100 p-1">
-      <Button {...args} variant="outline-light">
-        Outline Light
-      </Button>
-    </div>
-    <Button {...args} variant="outline-dark">
-      Outline Dark
-    </Button>
-    <Button {...args} variant="ghost">
-      Ghost
-    </Button>
-    <Button {...args} variant="success">
-      Success
-    </Button>
-    <Button {...args} variant="danger">
-      Danger
-    </Button>
-  </>
-)
-
-const IconsTemplate: StoryFn<ButtonProps> = args => (
-  <>
-    <Button {...args} variant="primary">
-      Primary
-    </Button>
-    <Button {...args} size="md" variant="secondary">
-      Secondary
-    </Button>
-    <Button {...args} size="sm" variant="outline-dark">
-      Outline Dark
-    </Button>
-  </>
-)
-
-const IconButtonTemplate: StoryFn<ButtonProps> = args => (
-  <>
-    <Button {...args} variant="primary" />
-    <Button {...args} variant="secondary" />
-    <div className="-m-1 bg-teal-100 p-1">
-      <Button {...args} variant="outline-light" />
-    </div>
-    <Button {...args} variant="outline-dark" />
-    <Button {...args} variant="ghost" />
-    <Button {...args} variant="success" />
-    <Button {...args} variant="danger" />
-  </>
-)
-
-const Default = Template.bind({})
-const Sizes = SizesTemplate.bind({})
-const Variants = VariantsTemplate.bind({})
-const Icons = IconsTemplate.bind({})
-const IconButton = IconButtonTemplate.bind({})
-const Truncated = Template.bind({})
-const Disabled = VariantsTemplate.bind({})
-
-// Args
-Default.args = {
-  children: "Button",
-}
-
-Icons.args = {
-  icon: <DummyPhoneIcon />,
-}
-
-IconButton.args = {
-  icon: <DummyPhoneIcon />,
-}
-
-Truncated.args = {
-  children: "This is a very long button text that should be truncated",
-}
-
-Disabled.args = {
-  disabled: true,
-}
-
-// Parameters
-Sizes.parameters = {
-  docs: {
-    description: {
-      story:
-        'Button can be rendered in three different sizes (`"sm"`,`"md"`, `"lg"`). The default size is `"lg"`.',
-    },
-  },
-}
-
-Variants.parameters = {
-  docs: {
-    description: {
-      story:
-        'Button can be rendered as seven different variants. The default variant is `"primary"`.',
-    },
-  },
-}
-
-IconButton.parameters = {
-  docs: {
-    description: {
-      story: "An icon button can be created by passing a valid `icon` prop and no `children`.",
-    },
-  },
-}
-
-Disabled.parameters = {
-  docs: {
-    description: {
-      story:
-        "Passing `disabled={true}` will prevent input events being registered on the Button and result in it's disabled state being rendered.",
-    },
-  },
-}
-
-// Decorators
-Default.decorators = [
-  Story => (
-    <div className="flex flex-wrap items-center gap-6">
-      <Story />
-    </div>
-  ),
-]
-
-Sizes.decorators = [...Default.decorators]
-
-Variants.decorators = [
-  Story => (
-    <div className="grid grid-cols-4 items-center gap-6">
-      <Story />
-    </div>
-  ),
-]
-
-Icons.decorators = [...Default.decorators]
-
-IconButton.decorators = [...Default.decorators]
-
-Disabled.decorators = [...Variants.decorators]
-
-Truncated.decorators = [
-  Story => (
-    <div className="flex items-center gap-6" style={{ maxWidth: 164 }}>
-      <Story />
-    </div>
-  ),
-]
-
-export { Default, Sizes, Variants, Icons, IconButton, Disabled, Truncated }
-export default meta

package/src/components/Button/Button.tsx

@@ -1,132 +0,0 @@
-import React from "react"
-
-// Types
-import type { ButtonVariant, ButtonSize } from "./types"
-import type { PolymorphicComponentPropsWithRef } from "../../types/polymorphic"
-
-// Utils
-import { clsx } from "clsx"
-import Spinner from "../Spinner"
-
-// Params
-type ButtonElementType = "button" | "a"
-
-interface BaseButtonProps {
-  variant?: ButtonVariant
-  size?: ButtonSize
-  icon?: React.ReactNode
-  as?: ButtonElementType
-  iconPosition?: "left" | "right"
-  children?: React.ReactNode
-  disabled?: boolean
-  type?: "button" | "submit" | "reset"
-  loading?: boolean
-}
-
-type ButtonProps<C extends ButtonElementType = "button"> = PolymorphicComponentPropsWithRef<
-  C,
-  BaseButtonProps
->
-
-type ButtonComponent = <C extends ButtonElementType = "button">(
-  props: ButtonProps<C>,
-) => React.ReactNode
-
-/*
-
-
-
-
-
-*/
-
-const Button: ButtonComponent = <C extends ButtonElementType = "button">({
-  variant = "primary",
-  size = "lg",
-  as,
-  icon,
-  iconPosition = "left",
-  children,
-  className = "",
-  disabled,
-  loading,
-  ...rest
-}: ButtonProps<C>) => {
-  const Component = (as ?? "button") as React.ElementType
-
-  return (
-    <Component
-      className={clsx(
-        "tracking-heading inline-flex w-fit cursor-pointer items-center justify-center overflow-hidden rounded-full leading-[1.4]! font-medium whitespace-nowrap transition-colors ease-out disabled:cursor-default disabled:opacity-40",
-        {
-          primary:
-            "bg-lime-100 text-teal-100 not-disabled:hover:bg-[hsl(95,81%,69%)] not-disabled:focus-visible:bg-[hsl(95,81%,69%)] not-disabled:active:bg-[hsl(95,67%,58%)]",
-          secondary:
-            "bg-teal-100 text-lime-100 not-disabled:hover:bg-[hsl(180,84%,20%)] not-disabled:focus-visible:bg-[hsl(180,84%,20%)] not-disabled:active:bg-[hsl(180,84%,10%)]",
-          "outline-light":
-            "border-[1.5px] border-white/30 text-white not-disabled:hover:bg-white/8 not-disabled:focus-visible:bg-white/8 not-disabled:active:bg-white/16",
-          "outline-dark":
-            "border-[1.5px] border-neutral-100/16 text-neutral-100 not-disabled:hover:border-neutral-100/20 not-disabled:hover:bg-neutral-100/4 not-disabled:focus-visible:border-neutral-100/20 not-disabled:active:border-neutral-100/20 not-disabled:active:bg-neutral-100/8",
-          ghost:
-            "text-neutral-50 not-disabled:hover:bg-teal-100/6 not-disabled:hover:text-neutral-100 not-disabled:focus-visible:bg-teal-100/6 not-disabled:focus-visible:text-neutral-100 not-disabled:active:bg-teal-100/12 not-disabled:active:text-neutral-100",
-          danger:
-            "bg-error-100 text-white not-disabled:hover:bg-[hsl(7,74%,42%)] not-disabled:focus-visible:bg-[hsl(7,74%,42%)] not-disabled:active:bg-[hsl(7,70%,35%)]",
-          success:
-            "bg-success-100 text-white not-disabled:hover:bg-[hsl(145,72%,29%)] not-disabled:focus-visible:bg-[hsl(145,72%,29%)] not-disabled:active:bg-[hsl(145,64%,24%)]",
-        }[variant],
-        {
-          sm: [
-            "min-h-9 gap-2 text-sm",
-            icon && !children ? "aspect-square size-9 shrink-0 grow-0" : "px-4",
-          ],
-          md: [
-            "min-h-12 gap-2.5 text-base",
-            icon && !children ? "aspect-square size-12 shrink-0 grow-0" : "px-6",
-          ],
-          lg: [
-            "min-h-12 gap-2.5 text-base lg:min-h-14 lg:gap-3.5",
-            icon && !children ? "aspect-square size-12 shrink-0 grow-0 lg:size-14" : "px-6 lg:px-8",
-          ],
-        }[size],
-        className,
-      )}
-      disabled={disabled}
-      {...rest}
-    >
-      {iconPosition === "left" && (icon || loading) && (
-        <div className={clsx("size-5", !!children && "-ml-1.5")}>
-          {loading ? (
-            <Spinner
-              className={clsx(
-                size === "sm"
-                  ? "mt-0.5 ml-0.5 [--spinner-size:1rem]!"
-                  : "[--spinner-size:1.25rem]!",
-              )}
-            />
-          ) : (
-            icon
-          )}
-        </div>
-      )}
-      {children && <div className="m-0 shrink grow truncate text-inherit">{children}</div>}
-      {iconPosition === "right" && (icon || loading) && (
-        <div className={clsx("size-5", !!children && "-mr-1.5")}>
-          {loading ? (
-            <Spinner
-              className={clsx(
-                size === "sm"
-                  ? "mt-0.5 mr-0.5 [--spinner-size:1rem]!"
-                  : "[--spinner-size:1.25rem]!",
-              )}
-            />
-          ) : (
-            icon
-          )}
-        </div>
-      )}
-    </Component>
-  )
-}
-
-export default Button
-export type { ButtonProps }

package/src/components/Button/index.ts

@@ -1,2 +0,0 @@
-export { default, type ButtonProps } from "./Button"
-export { type ButtonSize, BUTTON_SIZES, BUTTON_VARIANTS, type ButtonVariant } from "./types"

package/src/components/Button/types.ts

@@ -1,19 +0,0 @@
-export const BUTTON_SIZES = {
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-} as const
-
-export type ButtonSize = keyof typeof BUTTON_SIZES
-
-export const BUTTON_VARIANTS = {
-  primary: "primary",
-  secondary: "secondary",
-  "outline-light": "outline-light",
-  "outline-dark": "outline-dark",
-  ghost: "ghost",
-  success: "success",
-  danger: "danger",
-} as const
-
-export type ButtonVariant = keyof typeof BUTTON_VARIANTS

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,152 +0,0 @@
-import React from "react"
-
-// Components
-import Checkbox from "./Checkbox"
-
-// Types
-import type { Meta, StoryFn } from "@storybook/react-webpack5"
-import type { CheckboxProps } from "./Checkbox"
-import { CHECKBOX_SIZES } from "./types"
-
-/*
-
-
-
-
-*/
-
-const meta: Meta<CheckboxProps> = {
-  title: "Components/Checkbox",
-  component: Checkbox,
-  parameters: {
-    docs: {
-      description: {
-        component: "A binary input control allowing users to toggle a selection on or off.",
-      },
-    },
-    controls: {
-      exclude: ["className", "ref"],
-    },
-  },
-  argTypes: {
-    size: {
-      type: "string",
-      description: "Visual size of the checkbox control.",
-      table: {
-        type: {
-          summary: Object.keys(CHECKBOX_SIZES)
-            .map(s => `"${s}"`)
-            .join(" | "),
-        },
-        defaultValue: { summary: `"sm"` },
-      },
-      options: Object.keys(CHECKBOX_SIZES),
-      control: { type: "select" },
-    },
-    label: {
-      type: "string",
-      description: "Label text displayed next to the checkbox.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    meta: {
-      type: "string",
-      description: "Secondary text displayed below the label.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    disabled: {
-      description: "Disables the checkbox.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-  },
-  args: {
-    size: "md",
-  },
-}
-
-const Template: StoryFn<CheckboxProps> = args => <Checkbox {...args} />
-
-const SizesTemplate: StoryFn<CheckboxProps> = args => (
-  <>
-    <Checkbox {...args} size="sm" />
-    <Checkbox {...args} size="md" />
-  </>
-)
-
-const Default = Template.bind({})
-const Checked = Template.bind({})
-const Sizes = SizesTemplate.bind({})
-const WithLabel = Template.bind({})
-const WithLabelAndMeta = Template.bind({})
-const Disabled = Template.bind({})
-const DisabledChecked = Template.bind({})
-
-// Args
-Checked.args = { defaultChecked: true }
-WithLabel.args = { label: "Accept terms and conditions" }
-WithLabelAndMeta.args = {
-  label: "Accept terms and conditions",
-  meta: "You agree to our terms of service and privacy policy.",
-}
-Disabled.args = { disabled: true, label: "Disabled option" }
-DisabledChecked.args = { disabled: true, defaultChecked: true, label: "Disabled checked" }
-
-// Parameters
-Sizes.parameters = {
-  docs: {
-    description: {
-      story: 'Checkbox renders in two sizes (`"sm"`, `"md"`). Default is `"sm"`.',
-    },
-  },
-}
-
-WithLabel.parameters = {
-  docs: {
-    description: {
-      story: "Pass a `label` prop to display text alongside the checkbox.",
-    },
-  },
-}
-
-WithLabelAndMeta.parameters = {
-  docs: {
-    description: {
-      story: "The `meta` prop renders secondary descriptive text below the label.",
-    },
-  },
-}
-
-Disabled.parameters = {
-  docs: {
-    description: {
-      story: "Setting `disabled` reduces opacity and prevents interaction.",
-    },
-  },
-}
-
-// Decorators
-Default.decorators = [
-  Story => (
-    <div className="flex flex-wrap items-center gap-4">
-      <Story />
-    </div>
-  ),
-]
-
-Checked.decorators = [...Default.decorators]
-Sizes.decorators = [...Default.decorators]
-WithLabel.decorators = [...Default.decorators]
-WithLabelAndMeta.decorators = [...Default.decorators]
-Disabled.decorators = [...Default.decorators]
-DisabledChecked.decorators = [...Default.decorators]
-
-export { Default, Checked, Sizes, WithLabel, WithLabelAndMeta, Disabled, DisabledChecked }
-export default meta

package/src/components/Checkbox/Checkbox.tsx

@@ -1,90 +0,0 @@
-import React from "react"
-
-// Types
-import type { CheckboxSize } from "./types"
-
-// Utils
-import { clsx } from "clsx"
-
-// Params
-export interface CheckboxProps extends Omit<React.ComponentPropsWithRef<"input">, "size"> {
-  /** Label text for the checkbox. */
-  label?: string
-  /** Secondary text displayed below the label. */
-  meta?: string
-  /** Visual size of the checkbox control. */
-  size?: CheckboxSize
-}
-
-/*
-
-
-
-
-*/
-
-const Checkbox: React.FC<CheckboxProps> = ({
-  className,
-  label,
-  meta,
-  size = "md",
-  disabled,
-  ref,
-  ...rest
-}) => {
-  return (
-    <label
-      className={clsx(
-        "group/checkbox flex cursor-pointer items-start gap-2",
-        disabled && "pointer-events-none opacity-40",
-        className,
-      )}
-    >
-      <input
-        ref={ref}
-        type="checkbox"
-        className="peer absolute opacity-0"
-        aria-label={label ?? "Checkbox"}
-        disabled={disabled}
-        {...rest}
-      />
-      <div
-        className={clsx(
-          "relative flex shrink-0 items-center justify-center rounded-sm border border-neutral-100/20 bg-transparent text-white transition-colors ease-out group-hover/checkbox:border-teal-100/16 group-hover/checkbox:bg-black/5 peer-checked:border-transparent peer-checked:bg-teal-100 peer-checked:group-hover/checkbox:bg-[hsl(180,84%,13%)] peer-focus-visible:ring-2 peer-focus-visible:ring-teal-100 peer-focus-visible:ring-offset-1",
-          size === "sm" ? "size-4" : "size-5",
-        )}
-      >
-        <div
-          className={clsx(
-            "invisible group-has-checked/checkbox:visible",
-            size === "sm" ? "size-2.25" : "size-2.5",
-          )}
-        >
-          <svg
-            viewBox="0 0 10 8"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className="size-full"
-          >
-            <path
-              d="M1 4L3.5 6.5L9 1"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </div>
-      </div>
-      {label && (
-        <span className="text-sm/snug text-neutral-100">
-          {label}
-          {meta && <span className="block text-xs/snug font-normal text-neutral-50">{meta}</span>}
-        </span>
-      )}
-    </label>
-  )
-}
-
-Checkbox.displayName = "Checkbox"
-export default Checkbox