@dust-tt/sparkle 0.2.275 → 0.2.276

package/dist/esm/stories/NavigationList.stories.js

@@ -0,0 +1,140 @@
+import { __read } from "tslib";
+import React, { useEffect, useState } from "react";
+import { NavigationList, NavigationListItem, NavigationListLabel, ScrollArea, ScrollBar, } from "../index_with_tw_base";
+var meta = {
+    title: "Primitives/NavigationList",
+};
+export default meta;
+var getRandomTitles = function (count) {
+    var shuffled = fakeTitles.sort(function () { return 0.5 - Math.random(); });
+    return shuffled.slice(0, count);
+};
+export var NewNavigationListDemo = function () {
+    var _a = __read(useState(null), 2), selectedIndex = _a[0], setSelectedIndex = _a[1];
+    var _b = __read(useState([]), 2), conversationTitles = _b[0], setConversationTitles = _b[1];
+    useEffect(function () {
+        // Generate random titles for each date section only once
+        setConversationTitles([
+            { label: "Today", items: getRandomTitles(5) },
+            { label: "Yesterday", items: getRandomTitles(10) },
+        ]);
+        console.log(conversationTitles); // Add this line
+    }, []);
+    // Flatten the items array to easily manage indices
+    var allItems = conversationTitles.flatMap(function (section) { return section.items; });
+    return (React.createElement("div", { className: "s-h-[400px] s-w-[200px] s-py-12" },
+        React.createElement(ScrollArea, null,
+            React.createElement(NavigationList, { className: "s-w-full" }, conversationTitles.map(function (section, sectionIndex) { return (React.createElement(React.Fragment, { key: sectionIndex },
+                React.createElement(NavigationListLabel, { label: section.label }),
+                section.items.map(function (title, index) {
+                    var itemIndex = allItems.indexOf(title); // Calculate the global index
+                    return (React.createElement(NavigationListItem, { key: index, selected: itemIndex === selectedIndex, onClick: function () { return setSelectedIndex(itemIndex); }, label: title, className: "s-w-full" }));
+                }))); })),
+            React.createElement(ScrollBar, null))));
+};
+var fakeTitles = [
+    "Project Kickoff Meeting",
+    "Budget Review Discussion",
+    "Weekly Sync with Team",
+    "AI Bot Training Session",
+    "Quarterly Planning Meeting",
+    "Feedback on Latest Design",
+    "Client Requirements Gathering",
+    "Sprint Retrospective",
+    "Daily Standup",
+    "Marketing Strategy Planning",
+    "Code Review Session",
+    "Product Launch Preparation",
+    "Onboarding New Team Members",
+    "Customer Feedback Analysis",
+    "Feature Prioritization Discussion",
+    "Technical Debt Assessment",
+    "Supply Chain Optimization",
+    "Sales Performance Review",
+    "Cross-Department Collaboration",
+    "Innovation Brainstorming",
+    "Risk Management Workshop",
+    "Holiday Schedule Planning",
+    "Compliance and Security Update",
+    "UI/UX Design Critique",
+    "End-of-Year Wrap Up",
+    "Resource Allocation Meeting",
+    "Vendor Negotiation Strategy",
+    "Crisis Management Scenario",
+    "SEO Best Practices Review",
+    "New Hire Orientation",
+    "Remote Work Policy Update",
+    "Company Values Workshop",
+    "Leadership Development Session",
+    "Diversity and Inclusion Training",
+    "Performance Improvement Plan",
+    "Customer Success Story Sharing",
+    "Community Engagement Strategy",
+    "Internal Product Demo",
+    "Cost Reduction Initiative",
+    "Change Management Planning",
+    "Employee Recognition Program",
+    "IT Infrastructure Upgrade",
+    "Content Marketing Planning",
+    "Team Building Activities",
+    "Data Privacy Compliance",
+    "Board Meeting Preparation",
+    "Investor Relations Update",
+    "KPI Tracking and Reporting",
+    "Industry Trends Analysis",
+    "Partnership Opportunities Exploration",
+    "Employee Wellness Program",
+    "Talent Acquisition Strategy",
+    "Brand Positioning Workshop",
+    "Social Media Campaign Planning",
+    "Competitive Analysis Review",
+    "Legal Compliance Training",
+    "Cybersecurity Awareness Session",
+    "Cultural Exchange Program",
+    "Product Roadmap Presentation",
+    "Customer Journey Mapping",
+    "Financial Forecasting Session",
+    "Brand Storytelling Workshop",
+    "AI Ethics and Governance Discussion",
+    "Operational Efficiency Assessment",
+    "Annual Report Drafting",
+    "Project Milestone Celebration",
+    "Quality Assurance Review",
+    "Public Relations Strategy",
+    "Team Performance Metrics",
+    "Innovation Lab Tour",
+    "Digital Transformation Roadmap",
+    "Sustainability Initiatives Planning",
+    "Internal Communications Strategy",
+    "Customer Advisory Board Meeting",
+    "Agile Methodology Training",
+    "E-commerce Platform Update",
+    "Risk Assessment and Mitigation",
+    "Employee Satisfaction Survey Results",
+    "Sales Funnel Optimization",
+    "Cross-Cultural Communication Training",
+    "Global Expansion Strategy",
+    "Cloud Migration Plan",
+    "Crisis Communication Strategy",
+    "Webinar Content Creation",
+    "Supply Chain Risk Management",
+    "Data Analytics and Insights",
+    "Customer Onboarding Process",
+    "Brand Awareness Campaign",
+    "Product Feature Request Review",
+    "Annual Budget Allocation",
+    "Employee Exit Interview",
+    "User Feedback Session",
+    "Strategic Partnership Negotiation",
+    "Market Entry Strategy",
+    "Employee Handbook Update",
+    "Stakeholder Engagement Plan",
+    "AI Chatbot Development",
+    "Customer Retention Strategy",
+    "Company Anniversary Celebration",
+    "Leadership Team Offsite",
+    "Innovation Challenge Kickoff",
+    "Employee Benefits Review",
+    "Business Continuity Planning",
+];
+//# sourceMappingURL=NavigationList.stories.js.map

package/dist/esm/stories/NavigationList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationList.stories.js","sourceRoot":"","sources":["../../../src/stories/NavigationList.stories.tsx"],"names":[],"mappings":"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"}

package/dist/sparkle.css

@@ -854,10 +854,18 @@ select {
   margin-right: -0.25rem;
 }
 
+.-s-mr-2 {
+  margin-right: -0.5rem;
+}
+
 .-s-mt-1 {
   margin-top: -0.25rem;
 }
 
+.-s-mt-1\.5 {
+  margin-top: -0.375rem;
+}
+
 .-s-mt-2 {
   margin-top: -0.5rem;
 }
@@ -890,6 +898,14 @@ select {
   margin-left: 0.5rem;
 }
 
+.s-ml-3 {
+  margin-left: 0.75rem;
+}
+
+.s-ml-3\.5 {
+  margin-left: 0.875rem;
+}
+
 .s-ml-\[3px\] {
   margin-left: 3px;
 }
@@ -1683,6 +1699,11 @@ select {
        column-gap: 0.25rem;
 }
 
+.s-gap-x-1\.5 {
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
+
 .s-gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -1943,6 +1964,11 @@ select {
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
+.s-border-border-warning {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity));
+}
+
 .s-border-cyan-100 {
   --tw-border-opacity: 1;
   border-color: rgb(207 250 254 / var(--tw-border-opacity));
@@ -2079,7 +2105,7 @@ select {
 }
 
 .s-border-primary-200\/0 {
-  border-color: rgb(191 219 254 / 0);
+  border-color: rgb(226 232 240 / 0);
 }
 
 .s-border-purple-100 {
@@ -2161,21 +2187,6 @@ select {
   border-color: rgb(2 6 23 / 0.1);
 }
 
-.s-border-stone-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(245 245 244 / var(--tw-border-opacity));
-}
-
-.s-border-stone-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(231 229 228 / var(--tw-border-opacity));
-}
-
-.s-border-stone-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(214 211 209 / var(--tw-border-opacity));
-}
-
 .s-border-structure-0 {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -2195,10 +2206,6 @@ select {
   border-color: rgb(226 232 240 / var(--tw-border-opacity));
 }
 
-.s-border-structure-200\/0 {
-  border-color: rgb(226 232 240 / 0);
-}
-
 .s-border-structure-300\/30 {
   border-color: rgb(203 213 225 / 0.3);
 }
@@ -2795,7 +2802,7 @@ select {
 
 .s-bg-primary {
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
 .s-bg-purple-100 {
@@ -3012,54 +3019,23 @@ select {
   background-color: rgb(2 6 23 / 0.3);
 }
 
-.s-bg-stone-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
-}
-
-.s-bg-stone-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
-}
-
-.s-bg-stone-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(214 211 209 / var(--tw-bg-opacity));
-}
-
-.s-bg-stone-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(168 162 158 / var(--tw-bg-opacity));
-}
-
-.s-bg-stone-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(120 113 108 / var(--tw-bg-opacity));
-}
-
-.s-bg-stone-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
-}
-
-.s-bg-stone-700 {
+.s-bg-structure-0 {
   --tw-bg-opacity: 1;
-  background-color: rgb(68 64 60 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.s-bg-stone-800 {
+.s-bg-structure-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(41 37 36 / var(--tw-bg-opacity));
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
-.s-bg-structure-0 {
+.s-bg-structure-150 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(233 239 245 / var(--tw-bg-opacity));
 }
 
-.s-bg-structure-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+.s-bg-structure-150\/0 {
+  background-color: rgb(233 239 245 / 0);
 }
 
 .s-bg-structure-200 {
@@ -3211,10 +3187,6 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.s-bg-white\/0 {
-  background-color: rgb(255 255 255 / 0);
-}
-
 .s-bg-white\/80 {
   background-color: rgb(255 255 255 / 0.8);
 }
@@ -3444,6 +3416,11 @@ select {
   padding-bottom: 0.375rem;
 }
 
+.s-py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
 .s-py-16 {
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -3855,6 +3832,11 @@ select {
   color: rgb(2 6 23 / var(--tw-text-opacity));
 }
 
+.s-text-foreground-warning {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .s-text-fuchsia-700 {
   --tw-text-opacity: 1;
   color: rgb(162 28 175 / var(--tw-text-opacity));
@@ -3997,17 +3979,17 @@ select {
 
 .s-text-primary-400 {
   --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
+  color: rgb(148 163 184 / var(--tw-text-opacity));
 }
 
 .s-text-primary-950 {
   --tw-text-opacity: 1;
-  color: rgb(23 37 84 / var(--tw-text-opacity));
+  color: rgb(2 6 23 / var(--tw-text-opacity));
 }
 
 .s-text-primary-dark {
   --tw-text-opacity: 1;
-  color: rgb(23 37 84 / var(--tw-text-opacity));
+  color: rgb(2 6 23 / var(--tw-text-opacity));
 }
 
 .s-text-purple-700 {
@@ -4120,21 +4102,6 @@ select {
   color: rgb(2 6 23 / var(--tw-text-opacity));
 }
 
-.s-text-stone-800 {
-  --tw-text-opacity: 1;
-  color: rgb(41 37 36 / var(--tw-text-opacity));
-}
-
-.s-text-stone-900 {
-  --tw-text-opacity: 1;
-  color: rgb(28 25 23 / var(--tw-text-opacity));
-}
-
-.s-text-stone-950 {
-  --tw-text-opacity: 1;
-  color: rgb(12 10 9 / var(--tw-text-opacity));
-}
-
 .s-text-structure-0 {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -4605,7 +4572,7 @@ select {
 
 .hover\:s-border-primary-200:hover {
   --tw-border-opacity: 1;
-  border-color: rgb(191 219 254 / var(--tw-border-opacity));
+  border-color: rgb(226 232 240 / var(--tw-border-opacity));
 }
 
 .hover\:s-border-structure-100:hover {
@@ -4630,12 +4597,17 @@ select {
 
 .hover\:s-bg-primary-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
 .hover\:s-bg-primary-light:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+}
+
+.hover\:s-bg-structure-150:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(233 239 245 / var(--tw-bg-opacity));
 }
 
 .hover\:s-bg-structure-200:hover {
@@ -4678,14 +4650,19 @@ select {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-foreground:hover {
+  --tw-text-opacity: 1;
+  color: rgb(2 6 23 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-primary:hover {
   --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
+  color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
 .hover\:s-text-primary-900:hover {
   --tw-text-opacity: 1;
-  color: rgb(30 58 138 / var(--tw-text-opacity));
+  color: rgb(15 23 42 / var(--tw-text-opacity));
 }
 
 .hover\:s-text-slate-100:hover {
@@ -4709,12 +4686,12 @@ select {
 
 .focus\:s-bg-primary-100:focus {
   --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
 .focus\:s-text-primary-950:focus {
   --tw-text-opacity: 1;
-  color: rgb(23 37 84 / var(--tw-text-opacity));
+  color: rgb(2 6 23 / var(--tw-text-opacity));
 }
 
 .focus\:s-outline-none:focus {
@@ -4739,14 +4716,19 @@ select {
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
 }
 
+.focus\:s-ring-ring-warning:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
+}
+
 .focus\:s-ring-warning-300:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
 }
 
-.focus-visible\:s-border-primary-400:focus-visible {
+.focus-visible\:s-border-border-dark:focus-visible {
   --tw-border-opacity: 1;
-  border-color: rgb(96 165 250 / var(--tw-border-opacity));
+  border-color: rgb(226 232 240 / var(--tw-border-opacity));
 }
 
 .focus-visible\:s-outline-none:focus-visible {
@@ -4760,6 +4742,11 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:s-ring-ring:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+}
+
 .focus-visible\:s-ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
@@ -4781,17 +4768,17 @@ select {
 
 .active\:s-bg-primary-200:active {
   --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
 
 .active\:s-bg-primary-300:active {
   --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
 }
 
 .active\:s-bg-primary-dark:active {
   --tw-bg-opacity: 1;
-  background-color: rgb(23 37 84 / var(--tw-bg-opacity));
+  background-color: rgb(2 6 23 / var(--tw-bg-opacity));
 }
 
 .active\:s-bg-structure-100:active {
@@ -4799,6 +4786,11 @@ select {
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
+.active\:s-bg-structure-200:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+}
+
 .active\:s-bg-warning-100:active {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -4864,7 +4856,7 @@ select {
 
 .disabled\:s-bg-primary-muted:disabled {
   --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
 }
 
 .disabled\:s-bg-warning-muted:disabled {
@@ -4879,12 +4871,12 @@ select {
 
 .disabled\:s-text-primary-400:disabled {
   --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
+  color: rgb(148 163 184 / var(--tw-text-opacity));
 }
 
 .disabled\:s-text-primary-muted:disabled {
   --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
+  color: rgb(148 163 184 / var(--tw-text-opacity));
 }
 
 .disabled\:s-opacity-50:disabled {
@@ -5000,9 +4992,14 @@ select {
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
 }
 
+.data-\[disabled\]\:s-text-muted-foreground[data-disabled] {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
 .data-\[disabled\]\:s-text-primary-400[data-disabled] {
   --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
+  color: rgb(148 163 184 / var(--tw-text-opacity));
 }
 
 .data-\[state\=checked\]\:s-text-white[data-state=checked] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.275",
+  "version": "0.2.276",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/Dialog.tsx

@@ -95,7 +95,7 @@ export function Dialog({
                         {props.onCancel && (
                           <Button
                             label={props.cancelLabel ?? "Cancel"}
-                            variant="ghost"
+                            variant="outline"
                             onClick={props.onCancel}
                           />
                         )}

package/src/components/Input.tsx

@@ -1,3 +1,4 @@
+import { cva } from "class-variance-authority";
 import React, { forwardRef } from "react";
 
 import { cn } from "@sparkle/lib/utils";
@@ -13,51 +14,63 @@ export interface InputProps
   label?: string;
 }
 
-const inputStyleClasses = cn(
-  "s-text-sm s-bg-background s-rounded-xl s-border s-border-border-dark s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
-  "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground",
-  "placeholder:s-text-muted-foreground",
-  "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 focus-visible:s-ring-ring focus-visible:s-border-primary-400",
-  "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground"
+const INPUT_STATES = ["error", "disabled", "default"];
+
+type InputStateType = (typeof INPUT_STATES)[number];
+
+const stateVariantStyles: Record<InputStateType, string> = {
+  default: "focus-visible:s-ring-ring",
+  disabled:
+    "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground",
+  error: "s-border-border-warning focus:s-ring-ring-warning",
+};
+const inputStyleClasses = cva(
+  cn(
+    "s-text-sm s-bg-background s-rounded-xl s-border s-border-border-dark s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
+    "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground",
+    "placeholder:s-text-muted-foreground",
+    "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 focus-visible:s-border-border-dark"
+  ),
+  {
+    variants: {
+      state: stateVariantStyles,
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
 );
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
-    { className, error, value, label, showErrorLabel = false, ...props },
+    {
+      className,
+      error,
+      value,
+      label,
+      disabled,
+      showErrorLabel = false,
+      ...props
+    },
     ref
   ) => {
+    const state = error ? "error" : disabled ? "disabled" : "default";
     return (
       <div className="s-flex s-flex-col s-gap-1 s-px-1">
-        {label && (
-          <Label
-            htmlFor={props.name}
-            className="s-pb-1 s-text-element-700 dark:s-text-element-700-dark"
-          >
-            {label}
-          </Label>
-        )}
+        {label && <Label htmlFor={props.name}>{label}</Label>}
         <input
           ref={ref}
-          className={cn(
-            inputStyleClasses,
-            className,
-            !error
-              ? cn(
-                  "s-ring-structure-200 focus:s-ring-action-300",
-                  "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark"
-                )
-              : cn(
-                  "s-ring-warning-200 focus:s-ring-warning-300",
-                  "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"
-                )
-          )}
+          className={cn(inputStyleClasses({ state }), className)}
           data-1p-ignore={props.type !== "password"}
           value={value ?? undefined}
+          disabled={disabled}
           {...props}
         />
-        <div className="s-ml-2 s-text-sm s-text-warning-500">
-          {showErrorLabel && error ? error : null}
-        </div>
+        {showErrorLabel && error && (
+          <div className="s-ml-3.5 s-text-xs s-text-foreground-warning">
+            {error}
+          </div>
+        )}
       </div>
     );
   }

package/src/components/Label.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@sparkle/lib/utils";
 
 const labelVariants = cn(
-  "s-text-sm s-text-foreground s-leading-none",
+  "s-text-sm s-font-medium s-text-foreground s-leading-none",
   "peer-disabled:s-cursor-not-allowed peer-disabled:s-opacity-70"
 );