@darthcharles/greda 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Carlos Contreras
+
+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

@@ -1,3 +1,125 @@
-# Temporary Holding Version
+# Greda
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Composable React components with a neutral base theme and CSS tokens you control.
+Built from shadcn/ui New York and Radix primitives, with compiled styles and
+TypeScript declarations. Supports React 18 and 19; no Tailwind setup required.
+
+**[Explore Storybook](https://elegant-hotteok-cbb834.netlify.app/)** ·
+[Theming guide](https://elegant-hotteok-cbb834.netlify.app/?path=/docs/introduction-overview--theming) ·
+[Design tokens](https://elegant-hotteok-cbb834.netlify.app/?path=/story/design-tokens--overview)
+
+## Quick start
+
+Install into an existing React application with React and React DOM 18.2+ or 19:
+
+```bash
+npm install @darthcharles/greda
+```
+
+Import the stylesheet once at your application's entry point:
+
+```tsx
+import "@darthcharles/greda/styles.css";
+```
+
+Then import the components you need:
+
+```tsx
+import { Button } from "@darthcharles/greda";
+
+export function Example() {
+  return <Button>Continue</Button>;
+}
+```
+
+The stylesheet includes a ready-to-use base theme, CSS tokens, and scoped
+component styles. No custom theme or additional CSS is required to use Greda.
+Your application controls its own page layout, backgrounds, and fonts. React
+and React DOM remain peer dependencies outside the ESM bundle.
+
+Visit [Storybook](https://elegant-hotteok-cbb834.netlify.app/) for component APIs,
+variants, interaction examples, and accessibility guidance.
+
+Greda and application markup share unprefixed utility classes such as
+`bg-primary`, `text-foreground`, and `border-primary`. Pass them through
+`className` to override component defaults. See the theming guide for supported
+utilities and migration from `ds-*` classes.
+
+## With Tailwind 4
+
+Import Greda's tokens in your app's Tailwind CSS entry point. This registers the
+theme so Tailwind can generate utilities without a preset or manual mappings:
+
+```css
+@import "tailwindcss";
+@import "@darthcharles/greda/tokens.css";
+```
+
+```tsx
+<div className="bg-primary p-4 text-primary-foreground hover:bg-primary-hover">
+  Your content
+</div>
+```
+
+To use Greda components too, add
+`@import "@darthcharles/greda/styles.css" layer(components);` between those two
+imports, instead of importing `styles.css` again in JavaScript. The layer lets
+your generated utilities override component styles, including responsive variants.
+The import-only theme integration requires Tailwind 4; Greda's precompiled
+component styles also work without Tailwind.
+
+## Theming
+
+Customization is optional. To change the default theme, import your own
+`theme.css` after the package stylesheet and override only the tokens you need.
+Unspecified values keep their base defaults, and components and color utilities
+automatically use your overrides:
+
+```css
+/* theme.css */
+:root {
+  --primary: 9.500 55.556% 42.353%;
+  --primary-hover: 9.714 56.150% 36.667%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 9.500 55.556% 42.353%;
+  --radius: 0.75rem;
+}
+```
+
+Colors use space-separated HSL channels without an `hsl()` wrapper;
+`--overlay` also includes alpha. Other tokens accept ordinary CSS values.
+
+Spacing tokens such as `--space-4` are shared distances for padding, margin, and
+gap. Use them directly in your own CSS when needed; layout rules are optional
+examples, not theme setup. If you only need tokens, import
+`@darthcharles/greda/tokens.css` instead of `styles.css`.
+
+Set `data-color-scheme="dark"` on `<html>` for the base dark palette. Brand
+overrides need matching dark colors. Apply themes to `<html>` so portaled
+content inherits them; scoped themes use the content component's `container` prop.
+
+The [theming guide](https://elegant-hotteok-cbb834.netlify.app/?path=/docs/introduction-overview--theming)
+covers fonts, dark mode, and scoped portals. Browse the
+[interactive token catalog](https://elegant-hotteok-cbb834.netlify.app/?path=/story/design-tokens--overview)
+or read the defaults in [tokens.css](src/styles/tokens.css).
+
+## Development
+
+Use Node 24 and the committed npm lockfile:
+
+```bash
+nvm use
+npm ci
+npm run storybook
+```
+
+Storybook runs at [localhost:6006](http://localhost:6006). Run `npm run check`
+for project validation, then `npm run test:browser` for Playwright checks.
+
+See [Contributing](CONTRIBUTING.md) for build commands, Netlify hosting, upstream
+sources, and release guidance.
+
+## License
+
+[MIT](LICENSE) © 2026 Carlos Contreras. See
+[Third-party notices](THIRD_PARTY_NOTICES.md) for upstream attribution.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,19 @@
+# Third-party notices
+
+The components in `src/components/ui/` are adapted from shadcn/ui's official
+New York registry, distributed under the MIT license.
+
+- Source: https://github.com/shadcn-ui/ui
+- Registry: https://ui.shadcn.com/r/styles/new-york/{component}.json
+- Original copyright and license: `upstream/shadcn-ui/LICENSE.md` (included in the package)
+- Exact downloaded source, retrieval date, and hashes: `upstream/shadcn-ui/`
+
+This project uses the React 18-compatible New York component sources and
+Tailwind 3.4. Radix dependencies remain because they are used by those shadcn
+components. The upstream Toast is maintained here as the explicit primitive API
+requested for the initial component set.
+
+Local adaptations: relative imports; shared semantic color utilities; a scoped CSS baseline;
+consumer token mapping; optional portal containers; button loading, 1px press feedback from the current Nova style, and a default
+non-submit type; viewport bounds on dialogs; invalid-field styles; an accessible
+toast close name; and a distinct indeterminate checkbox icon.

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    loading?: boolean;
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/ui/card.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };

package/dist/components/ui/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/dist/components/ui/dialog.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>["container"];
+};
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>["container"];
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/components/ui/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/ui/label.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "class-variance-authority";
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist/components/ui/select.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    container?: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Portal>["container"];
+};
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Portal>["container"];
+} & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/components/ui/tabs.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/components/ui/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist/components/ui/toast.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { type VariantProps } from "class-variance-authority";
+declare const ToastProvider: React.FC<ToastPrimitives.ToastProviderProps>;
+declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const Toast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLLIElement>>;
+declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };

package/dist/components/ui/tooltip.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    container?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Portal>["container"];
+};
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Portal>["container"];
+} & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./components/ui/button";
+export * from "./components/ui/input";
+export * from "./components/ui/textarea";
+export * from "./components/ui/label";
+export * from "./components/ui/select";
+export * from "./components/ui/dialog";
+export * from "./components/ui/card";
+export * from "./components/ui/badge";
+export * from "./components/ui/checkbox";
+export * from "./components/ui/tabs";
+export * from "./components/ui/toast";
+export * from "./components/ui/tooltip";
+export { cn } from "./lib/utils";