@darthcharles/greda 1.0.0 → 1.2.0

package/README.md

@@ -68,8 +68,59 @@ your generated utilities override component styles, including responsive variant
 The import-only theme integration requires Tailwind 4; Greda's precompiled
 component styles also work without Tailwind.
 
+## Typography
+
+Shared typography roles work with compiled CSS and Tailwind 4:
+
+```tsx
+<h1 className="text-display text-primary">Take your time.</h1>
+<p className="text-body text-secondary">A little room to explore.</p>
+<p className="text-caption text-muted">Materials included</p>
+```
+
+Use `text-display`, `text-title`, `text-body`, `text-label`, `text-caption` and
+`text-eyebrow` for complete styles: family, size, weight, line height and tracking.
+Colors, margins, casing, italics and HTML semantics remain independent. Existing
+size utilities such as `text-sm` still work; `font-medium` can adjust one part of
+a role. Tailwind 4 can generate variants such as `md:text-title`.
+
+Customize a role on the same theme boundary using `--type-ROLE-family`, `-size`,
+`-weight`, `-leading` and `-tracking`, for example
+`--type-display-size: clamp(2rem, 6vw, 4rem)`. Font aliases rebind at theme
+boundaries so scoped font overrides apply. See **Design Tokens → Typography**
+in Storybook to choose a style, customize its tokens, and browse the foundation
+reference. Each style has a live preview and expandable token details.
+
 ## Theming
 
+For an optional ready-made identity, import Cobalto after the package stylesheet
+and select it on the document root:
+
+```tsx
+import "@darthcharles/greda/styles.css";
+import "@darthcharles/greda/themes/cobalto.css";
+// <html data-theme="cobalto" data-color-scheme="light">
+```
+
+Cobalto supplies blue/paper colors, Arial/Helvetica and square corners, with a
+complementary dark palette selected by `data-color-scheme="dark"` on the same
+element. Importing it alone leaves the neutral base unchanged. The application
+still controls page backgrounds and fonts. Select **cobalto** in Storybook to
+preview components, and see the [composition recipe](src/stories/Cobalto.mdx)
+for large mixed-weight titles, an asterisk, a polaroid photo, scoped portals,
+and Tailwind 4 import order. Both recipes use Tailwind utilities directly in JSX;
+compile them with your application’s Tailwind 4 setup.
+
+Comal is also available as an optional theme. Import
+`@darthcharles/greda/themes/comal.css` after the package stylesheet and set
+`data-theme="comal"` with `data-color-scheme="light"` or `"dark"` on the same
+element. It uses warm neutrals, terracotta actions and rounded corners. Its font
+stacks reference DM Sans and Fraunces; load those fonts in your application or
+override `--font-sans` and `--font-heading`. No fonts are downloaded or bundled
+by either theme. Both exports can be imported together and selected by attribute.
+See the [Comal composition recipe](src/stories/Comal.mdx) for a complete fictional
+workshop page, optional font setup, responsive layout and copyable Tailwind JSX.
+
 Customization is optional. To change the default theme, import your own
 `theme.css` after the package stylesheet and override the base colors or other
 tokens you need.

package/THIRD_PARTY_NOTICES.md

@@ -15,5 +15,6 @@ 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
+non-submit type; viewport bounds on dialogs and popovers; popover root positioning options,
+portal container refs, and an explicit close helper; invalid-field styles; an accessible
 toast close name; and a distinct indeterminate checkbox icon.

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+export type PopoverAnchorProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>;
+type Side = NonNullable<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>["side"]>;
+type Align = NonNullable<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>["align"]>;
+export interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {
+    placement?: Side | `${Side}-${Exclude<Align, "center">}`;
+    sideOffset?: number;
+}
+declare function Popover({ placement, sideOffset, ...props }: PopoverProps): React.JSX.Element;
+export type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    container?: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>["container"] | React.RefObject<HTMLElement | null>;
+};
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>["container"] | React.RefObject<HTMLElement | null>;
+} & React.RefAttributes<HTMLDivElement>>;
+export type PopoverCloseProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Close>;
+declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverAnchor };

package/dist/index.d.ts

@@ -10,4 +10,5 @@ export * from "./components/ui/checkbox";
 export * from "./components/ui/tabs";
 export * from "./components/ui/toast";
 export * from "./components/ui/tooltip";
+export * from "./components/ui/popover";
 export { cn } from "./lib/utils";