@solidrt/components 0.0.33 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -18,6 +18,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.20",
-    "@solidrt/core": "0.0.33"
+    "@solidrt/core": "0.0.35"
   }
 }

package/src/button.tsx

@@ -8,20 +8,30 @@ import type { LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger"
+export type ButtonSize = "sm" | "md" | "lg"
 
 export interface ButtonProps {
   // A string/number is rendered as the themed label; anything else is rendered
   // as-is, so a button can hold custom content (an icon, a row, ...).
   children?: any
-  // Visual role: primary (accent fill), secondary (surface fill with border),
-  // ghost (no fill until hover), danger (destructive accent fill).
+  // Visual role: primary (accent fill), secondary (darker-blue fill), ghost
+  // (no fill until hover), danger (destructive accent fill). None draw a border.
   variant?: ButtonVariant
+  // Fixed-width preset: pins the button to a set width (a longer label still
+  // expands past it), so a row of buttons lines up. Omitted, the button
+  // stretches to the container's width (the default). Padding is the same at
+  // every size.
+  size?: ButtonSize
   onPress?: () => void
   disabled?: boolean
   layout?: LayoutProps
   style?: StyleProps
 }
 
+// Minimum width per size preset (logical px). A minimum, not a hard width, so
+// labels wider than the preset never clip.
+const SIZE_WIDTH: Record<ButtonSize, number> = { sm: 88, md: 120, lg: 160 }
+
 // Themed convenience over Pressable: a padded, centered, accent-colored box with
 // a label. Press feedback is a slight scale, hover feedback a tint (non-touch
 // interaction policies only), both driven through Pressable's reactive style so
@@ -30,30 +40,34 @@ export interface ButtonProps {
 // its hover variant.
 export function Button(props: ButtonProps) {
   // Fill, hover fill, and label color per variant, read reactively from the
-  // theme. Only secondary draws a border.
+  // theme. No variant draws a border.
   let colors = () => {
     let c = theme.color
     switch (props.variant ?? "primary") {
       case "secondary":
-        return { fill: c.surface, hover: c.surfaceHover, label: c.text, border: c.border }
+        return { fill: c.secondary, hover: c.secondaryHover, label: c.onSecondary }
       case "ghost":
-        return { fill: "transparent", hover: c.surfaceHover, label: c.text, border: undefined }
+        return { fill: "transparent", hover: c.surfaceHover, label: c.text }
       case "danger":
-        return { fill: c.danger, hover: c.dangerHover, label: c.onPrimary, border: undefined }
+        return { fill: c.danger, hover: c.dangerHover, label: c.onPrimary }
       default:
-        return { fill: c.primary, hover: c.primaryHover, label: c.onPrimary, border: undefined }
+        return { fill: c.primary, hover: c.primaryHover, label: c.onPrimary }
     }
   }
-  let bg = (s: PressState) =>
-    props.style?.backgroundColor ??
-    (props.disabled
+  let idleFill = () =>
+    props.disabled
       ? props.variant === "ghost"
         ? "transparent"
         : theme.color.surface
+      : colors().fill
+  let bg = (s: PressState) =>
+    props.style?.backgroundColor ??
+    (props.disabled
+      ? idleFill()
       : s.hovered && policy.interaction !== "touch"
         ? colors().hover
         : colors().fill)
-  let radius = () => props.style?.borderRadius ?? theme.radius.sm
+  let radius = () => props.style?.borderRadius ?? theme.radius.md
   let label = () => (props.disabled ? theme.color.textMuted : colors().label)
   // Resolved once via children(): reading the raw children getter builds a new
   // subtree per read, so the typeof probe and the two mount sites below must
@@ -63,12 +77,7 @@ export function Button(props: ButtonProps) {
   // The label's polarity against the idle fill: onPrimary on a saturated fill
   // is light-on-dark even in a light theme, so it needs the low-DPI weight
   // compensation there too.
-  let labelOnDark = () =>
-    lightOnDark(
-      label(),
-      props.style?.backgroundColor ??
-        (props.disabled ? (props.variant === "ghost" ? "transparent" : theme.color.surface) : colors().fill),
-    )
+  let labelOnDark = () => lightOnDark(label(), props.style?.backgroundColor ?? idleFill())
 
   return (
     <Pressable
@@ -78,15 +87,14 @@ export function Button(props: ButtonProps) {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        paddingTop: space("sm"),
-        paddingBottom: space("sm"),
-        paddingLeft: space("md"),
-        paddingRight: space("md"),
+        paddingTop: space("md"),
+        paddingBottom: space("md"),
+        paddingLeft: space("lg"),
+        paddingRight: space("lg"),
+        ...(props.size ? { minWidth: SIZE_WIDTH[props.size] } : { width: "100%" }),
         ...props.layout,
       }}
       style={(s: PressState) => ({
-        borderColor: colors().border,
-        borderWidth: colors().border != null ? theme.borderWidth.sm : undefined,
         ...props.style,
         backgroundColor: bg(s),
         borderRadius: radius(),
@@ -103,4 +111,4 @@ export function Button(props: ButtonProps) {
       </Show>
     </Pressable>
   )
-}
+}

package/src/card.tsx

@@ -14,14 +14,14 @@ export interface CardProps {
   style?: StyleProps
 }
 
-// A themed surface container: a padded column box with a subtle border and
-// rounded corners, reading its colors from the theme so it recolors live.
-// Override any paint via style, spacing/sizing via layout.
+// A themed surface container: a padded column box with rounded corners, reading
+// its colors from the theme so it recolors live. Borderless by default; pass
+// style.borderWidth or style.borderColor to draw an outline. Override any paint
+// via style, spacing/sizing via layout.
 export function Card(props: CardProps) {
   let bg = () => props.style?.backgroundColor ?? theme.color.surface
-  let border = () => props.style?.borderColor ?? theme.color.border
-  let width = () => props.style?.borderWidth ?? theme.borderWidth.sm
   let radius = () => props.style?.borderRadius ?? theme.radius.lg
+  let hasBorder = () => props.style?.borderWidth != null || props.style?.borderColor != null
 
   return (
     <view
@@ -44,7 +44,14 @@ export function Card(props: CardProps) {
         </text>
       </Show>
       {props.children}
-      <d-rect drawStyle="stroke" color={border()} strokeWidth={width()} radius={radius()} />
+      <Show when={hasBorder()}>
+        <d-rect
+          drawStyle="stroke"
+          color={props.style?.borderColor ?? theme.color.border}
+          strokeWidth={props.style?.borderWidth ?? theme.borderWidth.sm}
+          radius={radius()}
+        />
+      </Show>
     </view>
   )
 }

package/src/theme.ts

@@ -35,6 +35,11 @@ export type Theme = {
     // Hover tint for primary-colored controls.
     primaryHover: string
     onPrimary: string
+    // Lower-emphasis accent: the puzzle mark's darker blue.
+    secondary: string
+    // Hover tint for secondary-colored controls.
+    secondaryHover: string
+    onSecondary: string
     // Validation / destructive.
     danger: string
     // Hover tint for danger-colored controls.
@@ -75,9 +80,15 @@ export let darkTheme: Theme = {
     // thin on low-DPI and its contrast depends on what sits behind it.
     textMuted: mixColors("#e6edf3", "#0b0f17", 0.4),
     border: "rgba(255,255,255,0.14)",
-    primary: "#1f6feb",
-    primaryHover: "#388bfd",
+    // Accent tuned to the puzzle mark's mid blue; hover lifts toward its
+    // lightest segment tone.
+    primary: "#547ebf",
+    primaryHover: "#7ea9ea",
     onPrimary: "#ffffff",
+    // The darker shade of the same puzzle segment; hover lifts toward primary.
+    secondary: "#2b5696",
+    secondaryHover: "#3a68ab",
+    onSecondary: "#ffffff",
     danger: "#f85149",
     dangerHover: "#ff7b72",
     scrim: "rgba(0,0,0,0.6)",
@@ -97,9 +108,15 @@ export let lightTheme: Theme = {
     text: "#1f2328",
     textMuted: mixColors("#1f2328", "#ffffff", 0.4),
     border: "rgba(0,0,0,0.15)",
-    primary: "#1f6feb",
-    primaryHover: "#1a5fd0",
+    // Accent tuned to the puzzle mark's mid blue; hover deepens toward its
+    // darker segment tone.
+    primary: "#547ebf",
+    primaryHover: "#3f5494",
     onPrimary: "#ffffff",
+    // The darker shade of the same puzzle segment; hover deepens it further.
+    secondary: "#2b5696",
+    secondaryHover: "#1f4176",
+    onSecondary: "#ffffff",
     danger: "#cf222e",
     dangerHover: "#a40e26",
     scrim: "rgba(0,0,0,0.4)",

package/src/types.ts

@@ -17,6 +17,22 @@ export interface StyleProps {
   y?: number
   rotate?: number
   scale?: number
+  // Per-axis scale; overrides `scale` on that axis (e.g. scaleX for a flip).
+  scaleX?: number
+  scaleY?: number
+  // 3D rotation in radians about the horizontal (rotateX) / vertical (rotateY)
+  // axis; reads as real depth only with `perspective` set.
+  rotateX?: number
+  rotateY?: number
+  // Perspective viewing distance in pixels, enabling 3D depth for rotateX/Y.
+  perspective?: number
+  // Transform origin (the pivot for scale/rotate), in pixels from the box's
+  // top-left. Defaults to the box center on each axis.
+  originX?: number
+  originY?: number
+  // Corner radii for the clip applied when overflow is non-visible (hidden,
+  // clip, scroll); a single number or [tl, tr, br, bl].
+  clipRadius?: number | [number, number, number, number]
   opacity?: number
 }
 

package/src/view.tsx

@@ -20,7 +20,15 @@ export function View(props: ViewProps) {
       x={props.style?.x}
       y={props.style?.y}
       scale={props.style?.scale}
+      scaleX={props.style?.scaleX}
+      scaleY={props.style?.scaleY}
       rotate={props.style?.rotate}
+      rotateX={props.style?.rotateX}
+      rotateY={props.style?.rotateY}
+      perspective={props.style?.perspective}
+      originX={props.style?.originX}
+      originY={props.style?.originY}
+      clipRadius={props.style?.clipRadius}
       opacity={props.style?.opacity}
       onPointerEnter={props.onPointerEnter}
       onPointerLeave={props.onPointerLeave}