@atelier-ui/react 0.1.10 → 0.1.12

package/src/lib/toast/llm-toast.css

@@ -0,0 +1,137 @@
+/* ── Toast Container ── */
+.llm-toast-container {
+  position: fixed;
+  z-index: var(--ui-z-toast, 400);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-spacing-2);
+  pointer-events: none;
+  max-width: min(24rem, calc(100vw - 2rem));
+  box-sizing: border-box;
+}
+
+.llm-toast-container.position-bottom-right {
+  bottom: var(--ui-spacing-4);
+  right: var(--ui-spacing-4);
+  align-items: flex-end;
+}
+
+.llm-toast-container.position-bottom-center {
+  bottom: var(--ui-spacing-4);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.llm-toast-container.position-top-right {
+  top: var(--ui-spacing-4);
+  right: var(--ui-spacing-4);
+  align-items: flex-end;
+}
+
+.llm-toast-container.position-top-center {
+  top: var(--ui-spacing-4);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+/* ── Individual Toast ── */
+.llm-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-spacing-3);
+  padding: var(--ui-spacing-4) var(--ui-spacing-5);
+  border-radius: var(--ui-radius-lg);
+  border-left: 4px solid transparent;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height-normal);
+  box-shadow: var(--ui-shadow-lg);
+  background-color: var(--ui-color-surface-raised, var(--ui-color-surface));
+  color: var(--ui-color-text);
+  pointer-events: auto;
+  min-width: 18rem;
+  max-width: 100%;
+  box-sizing: border-box;
+  animation: toast-enter 0.3s ease-out;
+}
+
+/* ── Variant borders & tints ── */
+.llm-toast.variant-default {
+  border-left-color: var(--ui-color-border);
+}
+
+.llm-toast.variant-success {
+  border-left-color: var(--ui-color-success);
+  background-color: color-mix(in srgb, var(--ui-color-success) 8%, var(--ui-color-surface-raised, var(--ui-color-surface)));
+}
+
+.llm-toast.variant-warning {
+  border-left-color: var(--ui-color-warning);
+  background-color: color-mix(in srgb, var(--ui-color-warning) 8%, var(--ui-color-surface-raised, var(--ui-color-surface)));
+}
+
+.llm-toast.variant-danger {
+  border-left-color: var(--ui-color-danger);
+  background-color: color-mix(in srgb, var(--ui-color-danger) 8%, var(--ui-color-surface-raised, var(--ui-color-surface)));
+}
+
+.llm-toast.variant-info {
+  border-left-color: var(--ui-color-info);
+  background-color: color-mix(in srgb, var(--ui-color-info) 8%, var(--ui-color-surface-raised, var(--ui-color-surface)));
+}
+
+/* ── Message ── */
+.llm-toast .message {
+  flex: 1;
+}
+
+/* ── Dismiss button ── */
+.llm-toast .dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--ui-radius-sm);
+  cursor: pointer;
+  color: var(--ui-color-text-muted, currentColor);
+  opacity: 0.7;
+  transition: opacity var(--ui-transition-fast, 150ms), background-color var(--ui-transition-fast, 150ms);
+  line-height: 1;
+}
+
+.llm-toast .dismiss:hover {
+  opacity: 1;
+  background-color: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.llm-toast .dismiss:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-ring);
+  opacity: 1;
+}
+
+/* ── Enter animation ── */
+@keyframes toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .llm-toast {
+    animation: none;
+  }
+}

package/src/lib/toast/llm-toast.d.ts

@@ -13,7 +13,7 @@ export interface ToastData extends Required<LlmToastOptions> {
  */
 export declare function LlmToastProvider({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 /** Access toast actions: show, dismiss, clear. Must be inside LlmToastProvider. */
 export declare function useLlmToast(): {
     show: (message: string, options?: LlmToastOptions) => string;
@@ -33,7 +33,7 @@ export interface LlmToastContainerProps {
  * Renders the toast stack at a fixed viewport position.
  * Must be placed inside LlmToastProvider.
  */
-export declare function LlmToastContainer({ position }: LlmToastContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function LlmToastContainer({ position }: LlmToastContainerProps): import("react").JSX.Element;
 /**
  * Properties for the LlmToastItem component.
  */
@@ -50,5 +50,5 @@ export interface LlmToastItemProps {
 /**
  * An individual toast notification item.
  */
-export declare function LlmToastItem({ data, onDismiss }: LlmToastItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function LlmToastItem({ data, onDismiss }: LlmToastItemProps): import("react").JSX.Element;
 //# sourceMappingURL=llm-toast.d.ts.map

package/src/lib/toast/llm-toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"llm-toast.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toast/llm-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,eAAe,EACf,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AACjB,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,QAAQ,CAAC,eAAe,CAAC;IAC1D,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;CACjB;AAgBD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CA6CrE;AAED,mFAAmF;AACnF,wBAAgB,WAAW;oBAhET,MAAM,YAAY,eAAe,KAAK,MAAM;kBAC9C,MAAM,KAAK,IAAI;iBAChB,IAAI;EAiElB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAyB,EAAE,EAAE,sBAAsB,2CAWtF;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CA+BlE"}
+{"version":3,"file":"llm-toast.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toast/llm-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,eAAe,EACf,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AACjB,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,QAAQ,CAAC,eAAe,CAAC;IAC1D,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;CACjB;AAgBD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BA6CrE;AAED,mFAAmF;AACnF,wBAAgB,WAAW;oBAhET,MAAM,YAAY,eAAe,KAAK,MAAM;kBAC9C,MAAM,KAAK,IAAI;iBAChB,IAAI;EAiElB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAyB,EAAE,EAAE,sBAAsB,+BAWtF;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BA+BlE"}

package/src/lib/toggle/llm-toggle.css

@@ -0,0 +1,118 @@
+.llm-toggle {
+  display: block;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-md);
+}
+
+.llm-toggle label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-spacing-3);
+  cursor: pointer;
+  user-select: none;
+  color: var(--ui-color-text);
+  line-height: var(--ui-line-height-normal);
+  min-height: 1.5rem;
+}
+
+/* Hide native checkbox visually but keep it accessible */
+.llm-toggle input[type='checkbox'] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Track — pill-shaped container */
+.llm-toggle .track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 1.5rem;
+  border-radius: var(--ui-radius-full);
+  border: 1px solid var(--ui-color-border-strong);
+  background-color: var(--ui-color-input-bg);
+  transition: background-color var(--ui-transition-fast),
+              border-color var(--ui-transition-fast),
+              box-shadow var(--ui-transition-fast);
+  cursor: pointer;
+}
+
+/* Thumb — circular slider */
+.llm-toggle .thumb {
+  position: absolute;
+  left: 0.125rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: var(--ui-radius-full);
+  background-color: var(--ui-color-border-strong);
+  box-shadow: var(--ui-shadow-xs);
+  transition: transform var(--ui-transition-normal) var(--ui-ease-out),
+              background-color var(--ui-transition-fast);
+}
+
+/* Hover state */
+.llm-toggle label:hover:not(:has(input:disabled)) .track {
+  border-color: var(--ui-color-primary);
+}
+
+/* Focus ring on track when native input is focused */
+.llm-toggle input[type='checkbox']:focus-visible + .track {
+  box-shadow: var(--ui-focus-ring);
+  border-color: var(--ui-color-primary);
+}
+
+/* Checked state — track */
+.llm-toggle.is-checked .track {
+  background-color: var(--ui-color-primary);
+  border-color: var(--ui-color-primary);
+}
+
+/* Checked state — thumb slides right */
+.llm-toggle.is-checked .thumb {
+  transform: translateX(1.25rem);
+  background-color: var(--ui-color-text-on-primary);
+}
+
+/* Invalid state — track border */
+.llm-toggle.is-invalid .track {
+  border-color: var(--ui-color-input-border-invalid);
+}
+
+.llm-toggle.is-invalid input[type='checkbox']:focus-visible + .track {
+  border-color: var(--ui-color-input-border-invalid);
+  box-shadow: 0 0 0 2px var(--ui-color-surface), 0 0 0 4px var(--ui-color-danger);
+}
+
+/* Disabled state */
+.llm-toggle.is-disabled {
+  opacity: var(--ui-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.llm-toggle.is-disabled label {
+  cursor: not-allowed;
+}
+
+.llm-toggle.is-disabled .track {
+  cursor: not-allowed;
+}
+
+/* Error messages */
+.llm-toggle .errors {
+  margin-top: var(--ui-spacing-2);
+}
+
+.llm-toggle .error-message {
+  margin: 0;
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-color-error-text);
+  line-height: var(--ui-line-height-normal);
+}

package/src/lib/toggle/llm-toggle.d.ts

@@ -25,5 +25,5 @@ export interface LlmToggleProps extends Omit<InputHTMLAttributes<HTMLInputElemen
 /**
  * A toggle switch component for binary choices, supporting validation and custom labels.
  */
-export declare function LlmToggle({ checked, onCheckedChange, invalid, errors, disabled, readOnly: reactReadOnly, readonly: specReadOnly, required, children, className, id, name, ...rest }: LlmToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function LlmToggle({ checked, onCheckedChange, invalid, errors, disabled, readOnly: reactReadOnly, readonly: specReadOnly, required, children, className, id, name, ...rest }: LlmToggleProps): import("react").JSX.Element;
 //# sourceMappingURL=llm-toggle.d.ts.map

package/src/lib/toggle/llm-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"llm-toggle.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toggle/llm-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EACzG,aAAa;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAe,EACf,eAAe,EACf,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,cAAc,2CAmDhB"}
+{"version":3,"file":"llm-toggle.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toggle/llm-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EACzG,aAAa;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAe,EACf,eAAe,EACf,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,cAAc,+BAmDhB"}

package/src/lib/tooltip/llm-tooltip.css

@@ -0,0 +1,80 @@
+/* Tooltip wrapper — inline container */
+.llm-tooltip-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+/* Tooltip content */
+.llm-tooltip {
+  position: absolute;
+  z-index: var(--ui-z-tooltip, 200);
+  display: block;
+  padding: var(--ui-spacing-1) var(--ui-spacing-2);
+  background: var(--ui-color-text);
+  color: var(--ui-color-surface);
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-xs);
+  line-height: var(--ui-line-height-normal);
+  border-radius: var(--ui-radius-sm);
+  box-shadow: var(--ui-shadow-md);
+  max-width: 20rem;
+  word-wrap: break-word;
+  pointer-events: none;
+  white-space: nowrap;
+
+  /* Entry animation */
+  animation: llm-tooltip-enter var(--ui-duration-fast) var(--ui-ease-out) forwards;
+}
+
+/* Positioning */
+.llm-tooltip.position-above {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.llm-tooltip.position-below {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.llm-tooltip.position-left {
+  right: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.llm-tooltip.position-right {
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@keyframes llm-tooltip-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateX(-50%);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateX(-50%);
+  }
+}
+
+/* Left/right don't need translateX in animation */
+.llm-tooltip.position-left,
+.llm-tooltip.position-right {
+  animation: llm-tooltip-enter-side var(--ui-duration-fast) var(--ui-ease-out) forwards;
+}
+
+@keyframes llm-tooltip-enter-side {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-50%);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(-50%);
+  }
+}

package/src/lib/tooltip/llm-tooltip.d.ts

@@ -13,5 +13,5 @@ export interface LlmTooltipProps extends LlmTooltipSpec {
 /**
  * A tooltip component that displays additional information when the trigger is hovered or focused.
  */
-export declare function LlmTooltip({ llmTooltip, llmTooltipPosition, llmTooltipDisabled, llmTooltipShowDelay, llmTooltipHideDelay, children, }: LlmTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function LlmTooltip({ llmTooltip, llmTooltipPosition, llmTooltipDisabled, llmTooltipShowDelay, llmTooltipHideDelay, children, }: LlmTooltipProps): import("react").JSX.Element;
 //# sourceMappingURL=llm-tooltip.d.ts.map

package/src/lib/tooltip/llm-tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"llm-tooltip.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/tooltip/llm-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAS,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,mBAAmB,CAAC;AAE3B;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,kBAA4B,EAC5B,kBAA0B,EAC1B,mBAAyB,EACzB,mBAAuB,EACvB,QAAQ,GACT,EAAE,eAAe,2CAiFjB"}
+{"version":3,"file":"llm-tooltip.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/tooltip/llm-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAS,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,mBAAmB,CAAC;AAE3B;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,kBAA4B,EAC5B,kBAA0B,EAC1B,mBAAyB,EACzB,mBAAuB,EACvB,QAAQ,GACT,EAAE,eAAe,+BAiFjB"}