@nattstack/ui 0.0.1

package/dist/button-spinner.module-T3OGVJS4.module.css

@@ -0,0 +1,95 @@
+.button_spinner {
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  scale: -1 1;
+  animation: spinner 1000ms steps(12, end) infinite;
+}
+
+@keyframes spinner {
+  to {
+    rotate: 1turn;
+  }
+}
+
+.button_spinner > div {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: calc(var(--size) / 2);
+  height: calc(var(--size) / 12);
+  pointer-events: none;
+  transform-origin: center left;
+  translate: 0 -50%;
+  transition: all 150ms;
+}
+
+.button_spinner > div::after {
+  position: absolute;
+  right: 0;
+  width: 50%;
+  height: 100%;
+  content: "";
+  background-color: currentColor;
+  border-radius: 9999px;
+}
+
+.button_spinner > div:nth-child(1) {
+  opacity: 1;
+  rotate: 0deg;
+}
+
+.button_spinner > div:nth-child(2) {
+  opacity: 0.925;
+  rotate: 30deg;
+}
+
+.button_spinner > div:nth-child(3) {
+  opacity: 0.85;
+  rotate: 60deg;
+}
+
+.button_spinner > div:nth-child(4) {
+  opacity: 0.775;
+  rotate: 90deg;
+}
+
+.button_spinner > div:nth-child(5) {
+  opacity: 0.7;
+  rotate: 120deg;
+}
+
+.button_spinner > div:nth-child(6) {
+  opacity: 0.625;
+  rotate: 150deg;
+}
+
+.button_spinner > div:nth-child(7) {
+  opacity: 0.55;
+  rotate: 180deg;
+}
+
+.button_spinner > div:nth-child(8) {
+  opacity: 0.475;
+  rotate: 210deg;
+}
+
+.button_spinner > div:nth-child(9) {
+  opacity: 0.4;
+  rotate: 240deg;
+}
+
+.button_spinner > div:nth-child(10) {
+  opacity: 0.325;
+  rotate: 270deg;
+}
+
+.button_spinner > div:nth-child(11) {
+  opacity: 0.25;
+  rotate: 300deg;
+}
+
+.button_spinner > div:nth-child(12) {
+  opacity: 0.15;
+  rotate: 330deg;
+}

package/dist/button.module-77AJOXGM.module.css

@@ -0,0 +1,209 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.button {
+  align-items: safe center;
+  border-style: none;
+  column-gap: 8px;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  font-family: var(--font-sans, sans-serif);
+  font-size: 14px;
+  font-weight: 500;
+  height: var(--size);
+  justify-content: safe center;
+  line-height: 1.5;
+  outline-color: var(--color-primary-9);
+  outline-offset: 2px;
+  outline-style: solid;
+  outline-width: 0px;
+  overflow: hidden;
+  transition-duration: 150ms;
+  transition-property: background-color, box-shadow, opacity, translate;
+  user-select: none;
+}
+
+/* When pressed, move the button down */
+.button:active:not(:disabled),
+.button[aria-pressed="true"]:not(:disabled) {
+  translate: 0 1px;
+}
+
+/* When disabled, disable cursor and reduce opacity */
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* When keyboard focused, show outline */
+.button:focus-visible {
+  outline-width: 2px;
+}
+
+/* ===================================================== */
+/* Icon only */
+/* ===================================================== */
+.button__icon_only {
+  width: var(--size) !important;
+  padding: 0 !important;
+}
+
+/* ===================================================== */
+/* Rounded */
+/* ===================================================== */
+.button__rounded_base {
+  border-radius: 12px;
+}
+
+.button__rounded_full {
+  border-radius: 9999px !important;
+}
+
+/* ===================================================== */
+/* Size */
+/* ===================================================== */
+.button__size_32 {
+  --size: 32px;
+  padding: 0 10px;
+  border-radius: 8px;
+}
+
+.button__size_36 {
+  --size: 36px;
+  padding: 0 12px;
+  border-radius: 10px;
+}
+
+.button__size_40 {
+  --size: 40px;
+  padding: 0 14px;
+  border-radius: 12px;
+}
+
+.button__size_44 {
+  --size: 44px;
+  padding: 0 16px;
+  border-radius: 14px;
+}
+
+.button__size_48 {
+  --size: 48px;
+  padding: 0 18px;
+  border-radius: 16px;
+}
+
+/* ===================================================== */
+/* Variant */
+/* ===================================================== */
+/* Accent */
+.button__variant_accent {
+  color: var(--color-white);
+  background-color: var(--color-primary-9);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #ffffff 5%) 50%,
+    color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
+  );
+}
+
+.button__variant_accent:active:not(:disabled),
+.button__variant_accent:hover:not(:disabled),
+.button__variant_accent[aria-pressed="true"]:not(:disabled) {
+  background-color: color-mix(in oklab, var(--color-primary-9) 100%, #ffffff 10%);
+}
+
+:global(.dark) .button__variant_accent {
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #000000 0%) 50%,
+    color-mix(in oklab, transparent 100%, #000000 5%) 50%
+  );
+}
+
+/* Ghost */
+.button__variant_ghost {
+  color: var(--color-black);
+  background-color: transparent;
+}
+
+.button__variant_ghost:active:not(:disabled),
+.button__variant_ghost:hover:not(:disabled),
+.button__variant_ghost[aria-pressed="true"]:not(:disabled) {
+  background-color: var(--color-gray-3);
+}
+
+:global(.dark) .button__variant_ghost {
+  color: var(--color-white);
+}
+
+/* Primary */
+.button__variant_primary {
+  color: var(--color-white);
+  background-color: var(--color-gray-dark-1);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
+    color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
+  );
+}
+
+.button__variant_primary:active:not(:disabled),
+.button__variant_primary:hover:not(:disabled),
+.button__variant_primary[aria-pressed="true"]:not(:disabled) {
+  background-color: color-mix(in oklab, var(--color-gray-dark-2) 100%, #ffffff 10%);
+}
+
+:global(.dark) .button__variant_primary {
+  color: var(--color-black);
+  background-color: var(--color-gray-light-1);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #000000 0%) 50%,
+    color-mix(in oklab, transparent 100%, #000000 5%) 50%
+  );
+}
+
+:global(.dark) .button__variant_primary:active:not(:disabled),
+:global(.dark) .button__variant_primary:hover:not(:disabled),
+:global(.dark) .button__variant_primary[aria-pressed="true"]:not(:disabled) {
+  background-color: color-mix(in oklab, var(--color-gray-light-2) 100%, #000000 10%);
+}
+
+/* Secondary */
+.button__variant_secondary {
+  color: var(--color-black);
+  background-color: var(--color-gray-2);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #000000 0%) 50%,
+    color-mix(in oklab, transparent 100%, #000000 2%) 50%
+  );
+  box-shadow: 0 0 0 1px var(--color-gray-4) inset;
+}
+
+.button__variant_secondary:active:not(:disabled),
+.button__variant_secondary:hover:not(:disabled),
+.button__variant_secondary[aria-pressed="true"]:not(:disabled) {
+  background-color: var(--color-gray-3);
+}
+
+:global(.dark) .button__variant_secondary {
+  color: var(--color-white);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #ffffff 1%) 50%,
+    color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
+  );
+}
+
+/* ===================================================== */
+/* Width */
+/* ===================================================== */
+.button__width_base {
+  width: max-content; /* Fit the button content */
+}
+
+.button__width_full {
+  width: 100%;
+}

package/dist/column.module-A7QCVPFC.module.css

@@ -0,0 +1,4 @@
+.column {
+  display: flex;
+  flex-direction: column;
+}

package/dist/index.d.ts

@@ -0,0 +1,250 @@
+import { ComponentProps, ReactNode, JSX, ElementType, CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from '@base-ui/react';
+
+interface ButtonIconProps extends ButtonInternalProps {
+    children?: ReactNode;
+    iconEnd?: never;
+    iconStart?: never;
+    isIconOnly: true;
+}
+interface ButtonProps extends ButtonInternalProps {
+    children?: string | string[];
+    isIconOnly?: false;
+}
+interface ButtonInternalProps extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
+    iconEnd?: ReactNode;
+    iconStart?: ReactNode;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    isFullWidth?: boolean;
+    isIconOnly?: boolean;
+    isLoading?: boolean;
+    isRounded?: boolean;
+    size?: 32 | 36 | 40 | 44 | 48;
+    variant?: "accent" | "ghost" | "primary" | "secondary";
+}
+type ButtonUnionProps = ButtonIconProps | ButtonProps;
+declare function Button(props: ButtonUnionProps): JSX.Element;
+declare const BUTTON_CLASS_NAME: {
+    readonly BASE: string;
+    readonly ICON_ONLY: string;
+    readonly ROUNDED: {
+        readonly BASE: string;
+        readonly FULL: string;
+    };
+    readonly SIZE: {
+        readonly 32: string;
+        readonly 36: string;
+        readonly 40: string;
+        readonly 44: string;
+        readonly 48: string;
+    };
+    readonly VARIANT: {
+        readonly ACCENT: string;
+        readonly GHOST: string;
+        readonly PRIMARY: string;
+        readonly SECONDARY: string;
+    };
+    readonly WIDTH: {
+        readonly BASE: string;
+        readonly FULL: string;
+    };
+};
+
+type ButtonLinkProps<ComponentType extends ElementType = "a"> = ButtonLinkInternalProps & ComponentProps<ComponentType>;
+interface ButtonLinkInternalProps extends Pick<ButtonProps, "isFullWidth" | "isIconOnly" | "isRounded" | "size" | "variant"> {
+    as?: ElementType;
+}
+declare function ButtonLink<ComponentType extends ElementType = "a">(props: ButtonLinkProps<ComponentType>): JSX.Element;
+
+type ColumnProps<ComponentType extends ElementType = "div"> = ColumnInternalProps & ComponentProps<ComponentType>;
+interface ColumnInternalProps {
+    alignItems?: CSSProperties["alignItems"];
+    as?: keyof JSX.IntrinsicElements;
+    flexWrap?: CSSProperties["flexWrap"];
+    gap?: CSSProperties["gap"];
+    gapX?: CSSProperties["columnGap"];
+    gapY?: CSSProperties["rowGap"];
+    justifyContent?: CSSProperties["justifyContent"];
+}
+declare function Column(props: ColumnProps): JSX.Element;
+declare const COLUMN_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface InputProps extends Omit<ComponentProps<"input">, "aria-pressed" | "disabled" | "readOnly" | "required"> {
+    isActive?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isRounded?: boolean;
+    isValid?: boolean;
+    size?: 32 | 36 | 40 | 44 | 48;
+}
+declare function Input(props: InputProps): JSX.Element;
+declare const INPUT_CLASS_NAME: {
+    readonly BASE: string;
+    readonly PASSWORD: string;
+    readonly ROUNDED: {
+        readonly BASE: string;
+        readonly FULL: string;
+    };
+    readonly SIZE: {
+        readonly 32: string;
+        readonly 36: string;
+        readonly 40: string;
+        readonly 44: string;
+        readonly 48: string;
+    };
+};
+
+interface LabelProps extends ComponentProps<"label"> {
+}
+declare function Label(props: LabelProps): JSX.Element;
+declare const LABEL_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+type RowProps<ComponentType extends ElementType = "div"> = ComponentProps<ComponentType> & RowInternalProps;
+interface RowInternalProps {
+    alignItems?: CSSProperties["alignItems"];
+    as?: keyof JSX.IntrinsicElements;
+    flexWrap?: CSSProperties["flexWrap"];
+    gap?: CSSProperties["gap"];
+    gapX?: CSSProperties["columnGap"];
+    gapY?: CSSProperties["rowGap"];
+    justifyContent?: CSSProperties["justifyContent"];
+}
+declare function Row(props: RowProps): JSX.Element;
+declare const ROW_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface SpacerProps extends Omit<ComponentProps<"div">, "children"> {
+    height?: CSSProperties["height"];
+    width?: CSSProperties["width"];
+}
+declare function Spacer(props: SpacerProps): react_jsx_runtime.JSX.Element;
+declare const SPACER_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface SwitchProps extends Omit<ComponentProps<typeof Switch$1.Root>, "checked" | "defaultChecked" | "disabled" | "nativeButton" | "readOnly" | "required"> {
+    isChecked?: boolean;
+    isDefaultChecked?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    size?: 18 | 24;
+}
+declare function Switch(props: SwitchProps): JSX.Element;
+declare const SWITCH_CLASS_NAME: {
+    readonly BASE: string;
+    readonly SIZE: {
+        readonly 18: string;
+        readonly 24: string;
+    };
+};
+
+interface TabsPillListProps extends Tabs$1.List.Props {
+}
+declare function TabsPillList(props: TabsPillListProps): react_jsx_runtime.JSX.Element;
+declare const TABS_PILL_LIST_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface TabsPillTabProps extends Omit<Tabs$1.Tab.Props, "nativeButton"> {
+    isNativeButton?: Tabs$1.Tab.Props["nativeButton"];
+}
+declare function TabsPillTab(props: TabsPillTabProps): react_jsx_runtime.JSX.Element;
+declare const TABS_PILL_TAB_CLASS_NAME: {
+    readonly BACKGROUND: string;
+    readonly BASE: string;
+    readonly WRAPPER: string;
+};
+
+interface TabsSegmentedListProps extends Tabs$1.List.Props {
+}
+declare function TabsSegmentedList(props: TabsSegmentedListProps): react_jsx_runtime.JSX.Element;
+declare const TABS_SEGMENTED_LIST_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface TabsSegmentedTabProps extends Omit<Tabs$1.Tab.Props, "nativeButton"> {
+    isNativeButton?: Tabs$1.Tab.Props["nativeButton"];
+}
+declare function TabsSegmentedTab(props: TabsSegmentedTabProps): react_jsx_runtime.JSX.Element;
+declare const TABS_SEGMENTED_TAB_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface TabsUnderlineListProps extends Tabs$1.List.Props {
+}
+declare function TabsUnderlineList(props: TabsUnderlineListProps): react_jsx_runtime.JSX.Element;
+declare const TABS_UNDERLINE_LIST_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface TabsUnderlineTabProps extends Omit<Tabs$1.Tab.Props, "nativeButton"> {
+    isNativeButton?: Tabs$1.Tab.Props["nativeButton"];
+}
+declare function TabsUnderlineTab(props: TabsUnderlineTabProps): react_jsx_runtime.JSX.Element;
+declare const TABS_UNDERLINE_TAB_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface TabsProps extends Tabs$1.Root.Props {
+}
+declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;
+declare const TABS_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface TabsPanelProps extends Tabs$1.Panel.Props {
+}
+declare function TabsPanel(props: TabsPanelProps): react_jsx_runtime.JSX.Element;
+declare const TABS_PANEL_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface TextareaProps extends Omit<ComponentProps<"textarea">, "aria-pressed" | "disabled" | "readOnly" | "required"> {
+    isActive?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isRounded?: boolean;
+    isValid?: boolean;
+}
+declare function Textarea(props: TextareaProps): JSX.Element;
+declare const TEXTAREA_CLASS_NAME: {
+    readonly BASE: string;
+    readonly INPUT: string;
+    readonly ROUNDED: {
+        readonly BASE: string;
+        readonly FULL: string;
+    };
+};
+
+interface TooltipProps extends Tooltip$1.Root.Props {
+}
+declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
+
+interface TooltipContentProps extends Pick<Tooltip$1.Positioner.Props, "side">, Tooltip$1.Popup.Props {
+}
+declare function TooltipContent(props: TooltipContentProps): react_jsx_runtime.JSX.Element;
+declare const TOOLTIP_CONTENT_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface TooltipProviderProps extends Tooltip$1.Provider.Props {
+}
+declare function TooltipProvider(props: TooltipProviderProps): react_jsx_runtime.JSX.Element;
+
+interface TooltipTriggerProps extends Tooltip$1.Trigger.Props {
+}
+declare function TooltipTrigger(props: TooltipTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { BUTTON_CLASS_NAME, Button, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, COLUMN_CLASS_NAME, Column, type ColumnProps, INPUT_CLASS_NAME, Input, type InputProps, LABEL_CLASS_NAME, Label, type LabelProps, ROW_CLASS_NAME, Row, type RowProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, type SpacerProps, Switch, type SwitchProps, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, type TabsPanelProps, TabsPillList, type TabsPillListProps, TabsPillTab, type TabsPillTabProps, type TabsProps, TabsSegmentedList, type TabsSegmentedListProps, TabsSegmentedTab, type TabsSegmentedTabProps, TabsUnderlineList, type TabsUnderlineListProps, TabsUnderlineTab, type TabsUnderlineTabProps, Textarea, type TextareaProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps };