tentile 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jan tenPas IV
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+# Tentile
+
+A composable React component library built for production. Tiles that snap together to build interfaces.
+
+---
+
+## Features
+
+- **Composable** — components are designed to work together, not in isolation
+- **Accessible** — ARIA attributes, keyboard navigation, and focus management built in
+- **Typed** — strict TypeScript with full prop interfaces and declaration files
+- **Themeable** — CSS custom properties for every token, dark mode included
+- **Lightweight** — no runtime dependencies, pure CSS Modules
+- **Forward-ref compatible** — every component supports `ref` forwarding
+
+---
+
+## Installation
+
+```bash
+npm install tentile
+```
+
+Requires React 18 or later:
+
+```bash
+npm install react react-dom
+```
+
+---
+
+## Quick start
+
+Import styles once at your app entry point:
+
+```tsx
+import 'tentile/styles'
+```
+
+Then use components anywhere:
+
+```tsx
+import { Button, Heading, Text, Input, Card, Badge } from 'tentile'
+
+export function App() {
+  return (
+    <Card>
+      <Heading level={2}>Welcome back</Heading>
+      <Text color="muted">Sign in to your account to continue.</Text>
+      <Input
+        label="Email address"
+        placeholder="you@example.com"
+        type="email"
+        required
+        fullWidth
+      />
+      <Button fullWidth>Sign in</Button>
+    </Card>
+  )
+}
+```
+
+---
+
+## Dark mode
+
+Add `data-theme="dark"` to your root element to activate dark mode:
+
+```tsx
+document.documentElement.setAttribute('data-theme', 'dark')
+```
+
+---
+
+## Development
+
+**Getting started:**
+```bash
+git clone https://github.com/jantenpas/tentile
+cd tentile
+npm install
+npm run dev        # Storybook on localhost:6006
+```
+
+**Other commands:**
+```bash
+npm run lint       # TypeScript type check
+npm run build      # Build library to /dist
+```
+
+---
+
+## License
+
+MIT © [Jan tenPas](https://github.com/jantenpas)

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,2 @@
+import { BadgeProps } from './Badge.types';
+export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Badge/Badge.types.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+export type BadgeVariant = 'default' | 'brand' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeSize = 'sm' | 'md';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    dot?: boolean;
+}

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge.types';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from './Button.types';
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    fullWidth?: boolean;
+}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { CardProps } from './Card.types';
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Card/Card.types.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+export type CardVariant = 'elevated' | 'outlined' | 'filled';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: CardVariant;
+    padding?: CardPadding;
+    interactive?: boolean;
+    /** Called when the card is activated via keyboard (Enter/Space). Defaults to onClick if not provided. */
+    onActivate?: () => void;
+}

package/dist/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps, CardVariant, CardPadding } from './Card.types';

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,2 @@
+import { HeadingProps } from './Heading.types';
+export declare const Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;

package/dist/components/Heading/Heading.types.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    level?: HeadingLevel;
+    size?: HeadingSize;
+    color?: 'default' | 'muted' | 'brand';
+}

package/dist/components/Heading/index.d.ts

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,2 @@
+import { InputProps } from './Input.types';
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.types.d.ts

@@ -0,0 +1,13 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputStatus = 'default' | 'error';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    size?: InputSize;
+    status?: InputStatus;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    fullWidth?: boolean;
+}

package/dist/components/Input/index.d.ts

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

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,2 @@
+import { LinkProps } from './Link.types';
+export declare const Link: import('react').ForwardRefExoticComponent<LinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/dist/components/Link/Link.types.d.ts

@@ -0,0 +1,6 @@
+import { AnchorHTMLAttributes } from 'react';
+export type LinkVariant = 'default' | 'subtle' | 'unstyled';
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    variant?: LinkVariant;
+    external?: boolean;
+}

package/dist/components/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './Link';
+export type { LinkProps, LinkVariant } from './Link.types';

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,2 @@
+import { TextProps } from './Text.types';
+export declare const Text: import('react').ForwardRefExoticComponent<TextProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Text/Text.types.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+export type TextColor = 'default' | 'muted' | 'subtle' | 'brand' | 'error' | 'success';
+export type TextAlign = 'left' | 'center' | 'right';
+export type TextAs = 'p' | 'span' | 'label' | 'div' | 'strong' | 'em' | 'small';
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    as?: TextAs;
+    size?: TextSize;
+    weight?: TextWeight;
+    color?: TextColor;
+    align?: TextAlign;
+    truncate?: boolean;
+    mono?: boolean;
+}

package/dist/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { Text } from './Text';
+export type { TextProps, TextSize, TextWeight, TextColor, TextAlign, TextAs } from './Text.types';

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),u=require("react"),H="_button_1medt_1",z="_sm_1medt_34",P="_md_1medt_40",E="_lg_1medt_46",F="_primary_1medt_53",O="_secondary_1medt_69",G="_ghost_1medt_85",J="_fullWidth_1medt_101",Q="_loading_1medt_106",U="_spin_1medt_1",b={button:H,sm:z,md:P,lg:E,primary:F,secondary:O,ghost:G,fullWidth:J,loading:Q,spin:U},B=u.forwardRef(({variant:o="primary",size:a="md",isLoading:s=!1,fullWidth:r=!1,disabled:e,className:t,children:n,..._},i)=>{const c=[b.button,b[o],b[a],r?b.fullWidth:"",s?b.loading:"",t??""].filter(Boolean).join(" ");return l.jsx("button",{ref:i,className:c,disabled:e||s,"aria-disabled":e||s,"aria-busy":s,..._,children:n})});B.displayName="Button";const V="_link_10rne_1",X="_subtle_10rne_24",Y="_unstyled_10rne_35",N={link:V,default:"_default_10rne_14",subtle:X,unstyled:Y},T=u.forwardRef(({variant:o="default",external:a=!1,className:s,children:r,...e},t)=>{const n=[N.link,N[o],s??""].filter(Boolean).join(" "),_=a?{target:"_blank",rel:"noopener noreferrer","aria-label":e["aria-label"]?e["aria-label"]:typeof r=="string"?`${r} (opens in new tab)`:void 0}:{};return l.jsx("a",{ref:t,className:n,..._,...e,children:r})});T.displayName="Link";const Z="_heading_sy96v_1",A="_xs_sy96v_10",D="_sm_sy96v_17",K="_md_sy96v_24",ss="_lg_sy96v_29",ts="_xl_sy96v_33",es="_muted_sy96v_47",ns="_brand_sy96v_51",j={heading:Z,xs:A,sm:D,md:K,lg:ss,xl:ts,"\\32xl":"_\\32xl_sy96v_37",default:"_default_sy96v_43",muted:es,brand:ns},_s={1:"2xl",2:"xl",3:"lg",4:"md",5:"sm",6:"xs"},W=u.forwardRef(({level:o=2,size:a,color:s="default",className:r,children:e,...t},n)=>{const _=`h${o}`,i=a??_s[o],c=[j.heading,j[i],j[s],r??""].filter(Boolean).join(" ");return l.jsx(_,{ref:n,className:c,...t,children:e})});W.displayName="Heading";const os="_text_vdqtp_1",as="_xs_vdqtp_7",rs="_sm_vdqtp_8",ds="_md_vdqtp_9",ls="_lg_vdqtp_10",is="_xl_vdqtp_11",cs="_regular_vdqtp_14",ms="_medium_vdqtp_15",us="_semibold_vdqtp_16",ps="_bold_vdqtp_17",fs="_muted_vdqtp_21",gs="_subtle_vdqtp_22",bs="_brand_vdqtp_23",vs="_error_vdqtp_24",xs="_success_vdqtp_25",ys="_left_vdqtp_28",hs="_center_vdqtp_29",js="_right_vdqtp_30",$s="_truncate_vdqtp_33",ws="_mono_vdqtp_40",f={text:os,xs:as,sm:rs,md:ds,lg:ls,xl:is,regular:cs,medium:ms,semibold:us,bold:ps,default:"_default_vdqtp_20",muted:fs,subtle:gs,brand:bs,error:vs,success:xs,left:ys,center:hs,right:js,truncate:$s,mono:ws},k=u.forwardRef(({as:o="p",size:a="md",weight:s="regular",color:r="default",align:e="left",truncate:t=!1,mono:n=!1,className:_,children:i,...c},p)=>{const g=[f.text,f[a],f[s],f[r],f[e],t?f.truncate:"",n?f.mono:"",_??""].filter(Boolean).join(" "),m=o,h=t&&typeof i=="string"&&!c.title?i:void 0;return l.jsx(m,{ref:p,className:g,title:h,...c,children:i})});k.displayName="Text";const qs="_card_3npr9_1",Ns="_elevated_3npr9_10",Bs="_outlined_3npr9_15",Ts="_filled_3npr9_20",Ws="_none_3npr9_27",ks="_sm_3npr9_28",Ls="_md_3npr9_29",Rs="_lg_3npr9_30",Ms="_interactive_3npr9_33",x={card:qs,elevated:Ns,outlined:Bs,filled:Ts,none:Ws,sm:ks,md:Ls,lg:Rs,interactive:Ms},L=u.forwardRef(({variant:o="elevated",padding:a="md",interactive:s=!1,className:r,children:e,onClick:t,onActivate:n,onKeyDown:_,...i},c)=>{const p=[x.card,x[o],x[a],s?x.interactive:"",r??""].filter(Boolean).join(" "),g=m=>{s&&(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),n?n():t&&t(m)),_==null||_(m)};return l.jsx("div",{ref:c,className:p,tabIndex:s?0:void 0,role:s?"button":void 0,onClick:t,onKeyDown:s?g:_,...i,children:e})});L.displayName="Card";const Is="_badge_1jmo8_1",Ss="_sm_1jmo8_13",Cs="_md_1jmo8_18",Hs="_brand_1jmo8_29",zs="_success_1jmo8_34",Ps="_warning_1jmo8_39",Es="_error_1jmo8_44",Fs="_info_1jmo8_49",Os="_dot_1jmo8_55",y={badge:Is,sm:Ss,md:Cs,default:"_default_1jmo8_24",brand:Hs,success:zs,warning:Ps,error:Es,info:Fs,dot:Os},R=u.forwardRef(({variant:o="default",size:a="md",dot:s=!1,className:r,children:e,...t},n)=>{const _=[y.badge,y[o],y[a],s?y.dot:"",r??""].filter(Boolean).join(" ");return l.jsx("span",{ref:n,className:_,...t,children:e})});R.displayName="Badge";const Gs="_wrapper_iwnmb_1",Js="_fullWidth_iwnmb_7",Qs="_label_iwnmb_12",Us="_required_iwnmb_20",Vs="_inputWrapper_iwnmb_26",Xs="_input_iwnmb_26",Ys="_sm_iwnmb_70",Zs="_md_iwnmb_76",As="_lg_iwnmb_82",Ds="_hasLeading_iwnmb_89",Ks="_hasTrailing_iwnmb_90",st="_iconLeading_iwnmb_92",tt="_iconTrailing_iwnmb_93",et="_error_iwnmb_105",nt="_hint_iwnmb_118",_t="_errorMessage_iwnmb_125",d={wrapper:Gs,fullWidth:Js,label:Qs,required:Us,inputWrapper:Vs,input:Xs,sm:Ys,md:Zs,lg:As,hasLeading:Ds,hasTrailing:Ks,iconLeading:st,iconTrailing:tt,error:et,hint:nt,errorMessage:_t},M=u.forwardRef(({label:o,hint:a,error:s,size:r="md",status:e="default",leadingIcon:t,trailingIcon:n,fullWidth:_=!1,className:i,id:c,required:p,disabled:g,...m},h)=>{const I=u.useId(),v=c??I,$=`${v}-hint`,w=`${v}-error`,q=s?"error":e,S=[d.wrapper,d[r],d[q],t?d.hasLeading:"",n?d.hasTrailing:"",_?d.fullWidth:""].filter(Boolean).join(" "),C=[d.input,i??""].filter(Boolean).join(" ");return l.jsxs("div",{className:S,children:[o&&l.jsx("label",{htmlFor:v,className:[d.label,p?d.required:""].filter(Boolean).join(" "),children:o}),l.jsxs("div",{className:d.inputWrapper,children:[t&&l.jsx("span",{className:d.iconLeading,"aria-hidden":"true",children:t}),l.jsx("input",{ref:h,id:v,className:C,disabled:g,required:p,"aria-required":p,"aria-invalid":q==="error","aria-describedby":s?w:a?$:void 0,...m}),n&&l.jsx("span",{className:d.iconTrailing,"aria-hidden":"true",children:n})]}),s&&l.jsx("span",{id:w,className:d.errorMessage,role:"alert",children:s}),a&&!s&&l.jsx("span",{id:$,className:d.hint,children:a})]})});M.displayName="Input";exports.Badge=R;exports.Button=B;exports.Card=L;exports.Heading=W;exports.Input=M;exports.Link=T;exports.Text=k;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './components/Button';
+export { Link } from './components/Link';
+export type { LinkProps, LinkVariant } from './components/Link';
+export { Heading } from './components/Heading';
+export type { HeadingProps, HeadingLevel, HeadingSize } from './components/Heading';
+export { Text } from './components/Text';
+export type { TextProps, TextSize, TextWeight, TextColor, TextAlign, TextAs } from './components/Text';
+export { Card } from './components/Card';
+export type { CardProps, CardVariant, CardPadding } from './components/Card';
+export { Badge } from './components/Badge';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './components/Badge';
+export { Input } from './components/Input';
+export type { InputProps, InputSize, InputStatus } from './components/Input';

package/dist/index.js

@@ -0,0 +1,316 @@
+import { jsx as d, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as g, useId as L } from "react";
+const M = "_button_1medt_1", I = "_sm_1medt_34", C = "_md_1medt_40", S = "_lg_1medt_46", z = "_primary_1medt_53", H = "_secondary_1medt_69", E = "_ghost_1medt_85", F = "_fullWidth_1medt_101", P = "_loading_1medt_106", R = "_spin_1medt_1", b = {
+  button: M,
+  sm: I,
+  md: C,
+  lg: S,
+  primary: z,
+  secondary: H,
+  ghost: E,
+  fullWidth: F,
+  loading: P,
+  spin: R
+}, G = g(
+  ({
+    variant: o = "primary",
+    size: a = "md",
+    isLoading: t = !1,
+    fullWidth: l = !1,
+    disabled: n,
+    className: s,
+    children: e,
+    ..._
+  }, i) => {
+    const c = [
+      b.button,
+      b[o],
+      b[a],
+      l ? b.fullWidth : "",
+      t ? b.loading : "",
+      s ?? ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ d(
+      "button",
+      {
+        ref: i,
+        className: c,
+        disabled: n || t,
+        "aria-disabled": n || t,
+        "aria-busy": t,
+        ..._,
+        children: e
+      }
+    );
+  }
+);
+G.displayName = "Button";
+const J = "_link_10rne_1", O = "_subtle_10rne_24", Q = "_unstyled_10rne_35", B = {
+  link: J,
+  default: "_default_10rne_14",
+  subtle: O,
+  unstyled: Q
+}, U = g(
+  ({
+    variant: o = "default",
+    external: a = !1,
+    className: t,
+    children: l,
+    ...n
+  }, s) => {
+    const e = [B.link, B[o], t ?? ""].filter(Boolean).join(" "), _ = a ? {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": n["aria-label"] ? n["aria-label"] : typeof l == "string" ? `${l} (opens in new tab)` : void 0
+    } : {};
+    return /* @__PURE__ */ d("a", { ref: s, className: e, ..._, ...n, children: l });
+  }
+);
+U.displayName = "Link";
+const V = "_heading_sy96v_1", X = "_xs_sy96v_10", Y = "_sm_sy96v_17", Z = "_md_sy96v_24", A = "_lg_sy96v_29", D = "_xl_sy96v_33", K = "_muted_sy96v_47", tt = "_brand_sy96v_51", x = {
+  heading: V,
+  xs: X,
+  sm: Y,
+  md: Z,
+  lg: A,
+  xl: D,
+  "\\32xl": "_\\32xl_sy96v_37",
+  default: "_default_sy96v_43",
+  muted: K,
+  brand: tt
+}, st = {
+  1: "2xl",
+  2: "xl",
+  3: "lg",
+  4: "md",
+  5: "sm",
+  6: "xs"
+}, nt = g(
+  ({
+    level: o = 2,
+    size: a,
+    color: t = "default",
+    className: l,
+    children: n,
+    ...s
+  }, e) => {
+    const _ = `h${o}`, i = a ?? st[o], c = [
+      x.heading,
+      x[i],
+      x[t],
+      l ?? ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ d(_, { ref: e, className: c, ...s, children: n });
+  }
+);
+nt.displayName = "Heading";
+const et = "_text_vdqtp_1", _t = "_xs_vdqtp_7", ot = "_sm_vdqtp_8", at = "_md_vdqtp_9", lt = "_lg_vdqtp_10", rt = "_xl_vdqtp_11", dt = "_regular_vdqtp_14", it = "_medium_vdqtp_15", ct = "_semibold_vdqtp_16", mt = "_bold_vdqtp_17", ut = "_muted_vdqtp_21", pt = "_subtle_vdqtp_22", gt = "_brand_vdqtp_23", bt = "_error_vdqtp_24", ft = "_success_vdqtp_25", vt = "_left_vdqtp_28", ht = "_center_vdqtp_29", yt = "_right_vdqtp_30", $t = "_truncate_vdqtp_33", xt = "_mono_vdqtp_40", p = {
+  text: et,
+  xs: _t,
+  sm: ot,
+  md: at,
+  lg: lt,
+  xl: rt,
+  regular: dt,
+  medium: it,
+  semibold: ct,
+  bold: mt,
+  default: "_default_vdqtp_20",
+  muted: ut,
+  subtle: pt,
+  brand: gt,
+  error: bt,
+  success: ft,
+  left: vt,
+  center: ht,
+  right: yt,
+  truncate: $t,
+  mono: xt
+}, qt = g(
+  ({
+    as: o = "p",
+    size: a = "md",
+    weight: t = "regular",
+    color: l = "default",
+    align: n = "left",
+    truncate: s = !1,
+    mono: e = !1,
+    className: _,
+    children: i,
+    ...c
+  }, u) => {
+    const f = [
+      p.text,
+      p[a],
+      p[t],
+      p[l],
+      p[n],
+      s ? p.truncate : "",
+      e ? p.mono : "",
+      _ ?? ""
+    ].filter(Boolean).join(" "), m = o, $ = s && typeof i == "string" && !c.title ? i : void 0;
+    return /* @__PURE__ */ d(m, { ref: u, className: f, title: $, ...c, children: i });
+  }
+);
+qt.displayName = "Text";
+const wt = "_card_3npr9_1", jt = "_elevated_3npr9_10", Nt = "_outlined_3npr9_15", Bt = "_filled_3npr9_20", Tt = "_none_3npr9_27", Wt = "_sm_3npr9_28", kt = "_md_3npr9_29", Lt = "_lg_3npr9_30", Mt = "_interactive_3npr9_33", h = {
+  card: wt,
+  elevated: jt,
+  outlined: Nt,
+  filled: Bt,
+  none: Tt,
+  sm: Wt,
+  md: kt,
+  lg: Lt,
+  interactive: Mt
+}, It = g(
+  ({
+    variant: o = "elevated",
+    padding: a = "md",
+    interactive: t = !1,
+    className: l,
+    children: n,
+    onClick: s,
+    onActivate: e,
+    onKeyDown: _,
+    ...i
+  }, c) => {
+    const u = [
+      h.card,
+      h[o],
+      h[a],
+      t ? h.interactive : "",
+      l ?? ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        ref: c,
+        className: u,
+        tabIndex: t ? 0 : void 0,
+        role: t ? "button" : void 0,
+        onClick: s,
+        onKeyDown: t ? (m) => {
+          t && (m.key === "Enter" || m.key === " ") && (m.preventDefault(), e ? e() : s && s(m)), _ == null || _(m);
+        } : _,
+        ...i,
+        children: n
+      }
+    );
+  }
+);
+It.displayName = "Card";
+const Ct = "_badge_1jmo8_1", St = "_sm_1jmo8_13", zt = "_md_1jmo8_18", Ht = "_brand_1jmo8_29", Et = "_success_1jmo8_34", Ft = "_warning_1jmo8_39", Pt = "_error_1jmo8_44", Rt = "_info_1jmo8_49", Gt = "_dot_1jmo8_55", y = {
+  badge: Ct,
+  sm: St,
+  md: zt,
+  default: "_default_1jmo8_24",
+  brand: Ht,
+  success: Et,
+  warning: Ft,
+  error: Pt,
+  info: Rt,
+  dot: Gt
+}, Jt = g(
+  ({
+    variant: o = "default",
+    size: a = "md",
+    dot: t = !1,
+    className: l,
+    children: n,
+    ...s
+  }, e) => {
+    const _ = [
+      y.badge,
+      y[o],
+      y[a],
+      t ? y.dot : "",
+      l ?? ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ d("span", { ref: e, className: _, ...s, children: n });
+  }
+);
+Jt.displayName = "Badge";
+const Ot = "_wrapper_iwnmb_1", Qt = "_fullWidth_iwnmb_7", Ut = "_label_iwnmb_12", Vt = "_required_iwnmb_20", Xt = "_inputWrapper_iwnmb_26", Yt = "_input_iwnmb_26", Zt = "_sm_iwnmb_70", At = "_md_iwnmb_76", Dt = "_lg_iwnmb_82", Kt = "_hasLeading_iwnmb_89", ts = "_hasTrailing_iwnmb_90", ss = "_iconLeading_iwnmb_92", ns = "_iconTrailing_iwnmb_93", es = "_error_iwnmb_105", _s = "_hint_iwnmb_118", os = "_errorMessage_iwnmb_125", r = {
+  wrapper: Ot,
+  fullWidth: Qt,
+  label: Ut,
+  required: Vt,
+  inputWrapper: Xt,
+  input: Yt,
+  sm: Zt,
+  md: At,
+  lg: Dt,
+  hasLeading: Kt,
+  hasTrailing: ts,
+  iconLeading: ss,
+  iconTrailing: ns,
+  error: es,
+  hint: _s,
+  errorMessage: os
+}, as = g(
+  ({
+    label: o,
+    hint: a,
+    error: t,
+    size: l = "md",
+    status: n = "default",
+    leadingIcon: s,
+    trailingIcon: e,
+    fullWidth: _ = !1,
+    className: i,
+    id: c,
+    required: u,
+    disabled: f,
+    ...m
+  }, $) => {
+    const T = L(), v = c ?? T, q = `${v}-hint`, w = `${v}-error`, j = t ? "error" : n, W = [
+      r.wrapper,
+      r[l],
+      r[j],
+      s ? r.hasLeading : "",
+      e ? r.hasTrailing : "",
+      _ ? r.fullWidth : ""
+    ].filter(Boolean).join(" "), k = [r.input, i ?? ""].filter(Boolean).join(" ");
+    return /* @__PURE__ */ N("div", { className: W, children: [
+      o && /* @__PURE__ */ d(
+        "label",
+        {
+          htmlFor: v,
+          className: [r.label, u ? r.required : ""].filter(Boolean).join(" "),
+          children: o
+        }
+      ),
+      /* @__PURE__ */ N("div", { className: r.inputWrapper, children: [
+        s && /* @__PURE__ */ d("span", { className: r.iconLeading, "aria-hidden": "true", children: s }),
+        /* @__PURE__ */ d(
+          "input",
+          {
+            ref: $,
+            id: v,
+            className: k,
+            disabled: f,
+            required: u,
+            "aria-required": u,
+            "aria-invalid": j === "error",
+            "aria-describedby": t ? w : a ? q : void 0,
+            ...m
+          }
+        ),
+        e && /* @__PURE__ */ d("span", { className: r.iconTrailing, "aria-hidden": "true", children: e })
+      ] }),
+      t && /* @__PURE__ */ d("span", { id: w, className: r.errorMessage, role: "alert", children: t }),
+      a && !t && /* @__PURE__ */ d("span", { id: q, className: r.hint, children: a })
+    ] });
+  }
+);
+as.displayName = "Input";
+export {
+  Jt as Badge,
+  G as Button,
+  It as Card,
+  nt as Heading,
+  as as Input,
+  U as Link,
+  qt as Text
+};

package/dist/tentile.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--color-brand-50: #F0FDFA;--color-brand-100: #CCFBF1;--color-brand-200: #99F6E4;--color-brand-300: #5EEAD4;--color-brand-400: #2DD4BF;--color-brand-500: #14B8A6;--color-brand-600: #0D9488;--color-brand-700: #0F766E;--color-brand-800: #115E59;--color-brand-900: #134E4A;--color-neutral-0: #FFFFFF;--color-neutral-50: #FAFAF9;--color-neutral-100: #F5F5F4;--color-neutral-200: #E7E5E4;--color-neutral-300: #D6D3D1;--color-neutral-400: #A8A29E;--color-neutral-500: #78716C;--color-neutral-600: #57534E;--color-neutral-700: #44403C;--color-neutral-800: #292524;--color-neutral-900: #1C1917;--color-neutral-1000: #0C0A09;--color-success-light: #d3f9d8;--color-success: #2f9e44;--color-success-dark: #1e6e2e;--color-warning-light: #fff3bf;--color-warning: #f08c00;--color-warning-dark: #b35900;--color-error-light: #ffe3e3;--color-error: #e03131;--color-error-dark: #a61e1e;--color-info-light: #d0ebff;--color-info: #1971c2;--color-info-dark: #0d3d73;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--font-family-heading: "Sora", system-ui, sans-serif;--font-family-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-family-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-loose: 1.75;--letter-spacing-tight: -.025em;--letter-spacing-normal: 0em;--letter-spacing-wide: .025em;--letter-spacing-wider: .05em;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--transition-fast: .1s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--z-base: 0;--z-raised: 10;--z-overlay: 100;--z-modal: 200;--z-toast: 300}[data-theme=dark]{--color-brand-50: #0D2E2B;--color-brand-100: #0F3D39;--color-brand-200: #115E59;--color-brand-300: #0F766E;--color-brand-400: #0D9488;--color-brand-500: #14B8A6;--color-brand-600: #2DD4BF;--color-brand-700: #5EEAD4;--color-brand-800: #99F6E4;--color-brand-900: #CCFBF1;--color-neutral-0: #1C1917;--color-neutral-50: #141412;--color-neutral-100: #292524;--color-neutral-200: #44403C;--color-neutral-300: #57534E;--color-neutral-400: #78716C;--color-neutral-500: #A8A29E;--color-neutral-600: #D6D3D1;--color-neutral-700: #E7E5E4;--color-neutral-800: #F5F5F4;--color-neutral-900: #FAFAF9;--color-neutral-1000: #FFFFFF;--color-success-light: #052E16;--color-success: #4ADE80;--color-success-dark: #86EFAC;--color-warning-light: #2D1F00;--color-warning: #FBBF24;--color-warning-dark: #FDE68A;--color-error-light: #2D0A0A;--color-error: #F87171;--color-error-dark: #FECACA;--color-info-light: #0A1929;--color-info: #60A5FA;--color-info-dark: #BAE6FD;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .4);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .6), 0 8px 10px -6px rgb(0 0 0 / .5)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}._button_1medt_1{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);border:1px solid transparent;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),opacity var(--transition-fast);cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1}._button_1medt_1:focus-visible{outline:2px solid var(--color-brand-700);outline-offset:2px}._button_1medt_1:disabled,._button_1medt_1[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}._sm_1medt_34{font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3);height:2rem}._md_1medt_40{font-size:var(--font-size-md);padding:var(--space-2) var(--space-4);height:2.5rem}._lg_1medt_46{font-size:var(--font-size-lg);padding:var(--space-3) var(--space-6);height:3rem}._primary_1medt_53{background-color:var(--color-brand-700);color:var(--color-neutral-0);border-color:var(--color-brand-700)}._primary_1medt_53:hover:not(:disabled){background-color:var(--color-brand-800);border-color:var(--color-brand-800)}._primary_1medt_53:active:not(:disabled){background-color:var(--color-brand-900);border-color:var(--color-brand-900)}._secondary_1medt_69{background-color:var(--color-neutral-0);color:var(--color-brand-700);border-color:var(--color-brand-700)}._secondary_1medt_69:hover:not(:disabled){background-color:var(--color-brand-50);color:var(--color-brand-900);border-color:var(--color-brand-800)}._secondary_1medt_69:active:not(:disabled){background-color:var(--color-brand-100)}._ghost_1medt_85{background-color:transparent;color:var(--color-neutral-700);border-color:transparent}._ghost_1medt_85:hover:not(:disabled){background-color:var(--color-neutral-100);color:var(--color-neutral-900)}._ghost_1medt_85:active:not(:disabled){background-color:var(--color-neutral-200)}._fullWidth_1medt_101{width:100%}._loading_1medt_106{position:relative;color:transparent;pointer-events:none}._loading_1medt_106:after{content:"";position:absolute;width:1em;height:1em;border:2px solid white;border-right-color:transparent;border-radius:50%;animation:_spin_1medt_1 .6s linear infinite}._secondary_1medt_69._loading_1medt_106:after,._ghost_1medt_85._loading_1medt_106:after{border-color:var(--color-brand-700);border-right-color:transparent}@keyframes _spin_1medt_1{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){._button_1medt_1{transition:none}._loading_1medt_106:after{animation:none;opacity:.5}}._link_10rne_1{font-family:var(--font-family-sans);transition:color var(--transition-fast);cursor:pointer}._link_10rne_1:focus-visible{outline:2px solid var(--color-brand-700);outline-offset:2px;border-radius:var(--radius-sm)}._default_10rne_14{color:var(--color-brand-700);text-decoration:underline;text-underline-offset:2px}._default_10rne_14:hover{color:var(--color-brand-800)}._subtle_10rne_24{color:var(--color-neutral-700);text-decoration:none}._subtle_10rne_24:hover{color:var(--color-neutral-900);text-decoration:underline;text-underline-offset:2px}._unstyled_10rne_35{color:inherit;text-decoration:none}._heading_sy96v_1{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight);margin:0}._xs_sy96v_10{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal)}._sm_sy96v_17{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);letter-spacing:var(--letter-spacing-normal)}._md_sy96v_24{font-size:var(--font-size-2xl);line-height:var(--line-height-snug)}._lg_sy96v_29{font-size:var(--font-size-3xl)}._xl_sy96v_33{font-size:var(--font-size-4xl)}._\\32xl_sy96v_37{font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-.03em}._default_sy96v_43{color:var(--color-neutral-900)}._muted_sy96v_47{color:var(--color-neutral-600)}._brand_sy96v_51{color:var(--color-brand-700)}._text_vdqtp_1{font-family:var(--font-family-sans);margin:0}._xs_vdqtp_7{font-size:var(--font-size-xs);line-height:var(--line-height-normal)}._sm_vdqtp_8{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}._md_vdqtp_9{font-size:var(--font-size-md);line-height:var(--line-height-normal)}._lg_vdqtp_10{font-size:var(--font-size-lg);line-height:var(--line-height-normal)}._xl_vdqtp_11{font-size:var(--font-size-xl);line-height:var(--line-height-normal)}._regular_vdqtp_14{font-weight:var(--font-weight-regular)}._medium_vdqtp_15{font-weight:var(--font-weight-medium)}._semibold_vdqtp_16{font-weight:var(--font-weight-semibold)}._bold_vdqtp_17{font-weight:var(--font-weight-bold)}._default_vdqtp_20{color:var(--color-neutral-900)}._muted_vdqtp_21{color:var(--color-neutral-600)}._subtle_vdqtp_22{color:var(--color-neutral-500)}._brand_vdqtp_23{color:var(--color-brand-700)}._error_vdqtp_24{color:var(--color-error-dark)}._success_vdqtp_25{color:var(--color-success)}._left_vdqtp_28{text-align:left}._center_vdqtp_29{text-align:center}._right_vdqtp_30{text-align:right}._truncate_vdqtp_33{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._mono_vdqtp_40{font-family:var(--font-family-mono);font-size:.9em}._card_3npr9_1{background-color:var(--color-neutral-0);border-radius:var(--radius-lg);transition:box-shadow var(--transition-normal),transform var(--transition-normal)}._elevated_3npr9_10{box-shadow:var(--shadow-md);border:1px solid var(--color-neutral-200)}._outlined_3npr9_15{box-shadow:none;border:1px solid var(--color-neutral-200)}._filled_3npr9_20{box-shadow:none;border:1px solid transparent;background-color:var(--color-neutral-100)}._none_3npr9_27{padding:0}._sm_3npr9_28{padding:var(--space-3)}._md_3npr9_29{padding:var(--space-6)}._lg_3npr9_30{padding:var(--space-8)}._interactive_3npr9_33{cursor:pointer}._interactive_3npr9_33:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}._interactive_3npr9_33:active{box-shadow:var(--shadow-sm);transform:translateY(0)}._interactive_3npr9_33:focus-visible{outline:2px solid var(--color-brand-700);outline-offset:2px}@media(prefers-reduced-motion:reduce){._card_3npr9_1{transition:none}._interactive_3npr9_33:hover,._interactive_3npr9_33:active{transform:none}}._badge_1jmo8_1{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);white-space:nowrap;line-height:1}._sm_1jmo8_13{font-size:var(--font-size-xs);padding:.2rem var(--space-2)}._md_1jmo8_18{font-size:var(--font-size-sm);padding:.25rem var(--space-3)}._default_1jmo8_24{background-color:var(--color-neutral-200);color:var(--color-neutral-800)}._brand_1jmo8_29{background-color:var(--color-brand-100);color:var(--color-brand-900)}._success_1jmo8_34{background-color:var(--color-success-light);color:var(--color-success-dark)}._warning_1jmo8_39{background-color:var(--color-warning-light);color:var(--color-neutral-900)}._error_1jmo8_44{background-color:var(--color-error-light);color:var(--color-error-dark)}._info_1jmo8_49{background-color:var(--color-info-light);color:var(--color-info-dark)}._dot_1jmo8_55:before{content:"";display:inline-block;width:.425em;height:.425em;border-radius:var(--radius-full);background-color:currentColor;flex-shrink:0}._wrapper_iwnmb_1{display:inline-flex;flex-direction:column;gap:var(--space-1)}._fullWidth_iwnmb_7{width:100%}._label_iwnmb_12{font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-700);line-height:var(--line-height-normal)}._required_iwnmb_20:after{content:" *";color:var(--color-error-dark)}._inputWrapper_iwnmb_26{position:relative;display:flex;align-items:center}._input_iwnmb_26{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);color:var(--color-neutral-900);background-color:var(--color-neutral-0);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none}._input_iwnmb_26::placeholder{color:var(--color-neutral-400)}._input_iwnmb_26:hover:not(:disabled):not(:focus){border-color:var(--color-neutral-400)}._input_iwnmb_26:focus{border-color:var(--color-brand-700);outline:2px solid var(--color-brand-700);outline-offset:2px;box-shadow:none}._input_iwnmb_26:disabled{background-color:var(--color-neutral-100);color:var(--color-neutral-400);cursor:not-allowed;border-color:var(--color-neutral-200)}._sm_iwnmb_70 ._input_iwnmb_26{font-size:var(--font-size-sm);padding:var(--space-1) var(--space-3);height:2rem}._md_iwnmb_76 ._input_iwnmb_26{font-size:var(--font-size-md);padding:var(--space-2) var(--space-3);height:2.5rem}._lg_iwnmb_82 ._input_iwnmb_26{font-size:var(--font-size-lg);padding:var(--space-3) var(--space-4);height:3rem}._hasLeading_iwnmb_89 ._input_iwnmb_26{padding-left:2.25rem}._hasTrailing_iwnmb_90 ._input_iwnmb_26{padding-right:2.25rem}._iconLeading_iwnmb_92,._iconTrailing_iwnmb_93{position:absolute;display:flex;align-items:center;color:var(--color-neutral-500);pointer-events:none}._iconLeading_iwnmb_92{left:var(--space-3)}._iconTrailing_iwnmb_93{right:var(--space-3)}._error_iwnmb_105 ._input_iwnmb_26{border-color:var(--color-error)}._error_iwnmb_105 ._input_iwnmb_26:focus{border-color:var(--color-error-dark);outline:2px solid var(--color-error-dark);outline-offset:2px;box-shadow:none}._hint_iwnmb_118{font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-neutral-500);line-height:var(--line-height-normal)}._errorMessage_iwnmb_125{font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-error-dark);line-height:var(--line-height-normal)}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "tentile",
+  "version": "0.1.0",
+  "description": "A React component library by Jan tenPas — tiles that snap together to build interfaces",
+  "author": "Jan tenPas",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./dist/tentile.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsc && vite build",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run build",
+    "lint": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/react": "^8.6.17",
+    "@storybook/react-vite": "^8.6.17",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^5.1.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.6.17",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^5.0.0-beta.6"
+  }
+}